css三角符号居中并实现图片宽度自适应

<view class="nav bc_white">
    <view class="{{selected?'red':'default'}}" bindtap="selected">基础信息<span></span></view>
    <view class="{{selected1?'red':'default'}} sere2" bindtap="selected1">产品简介<span></span></view>
    <view class="{{selected2?'red':'default'}} sere2" bindtap="selected2">溯源数据<span></span></view>
    <view class="{{selected3?'red':'default'}} sere2" bindtap="selected3">物流信息<span></span></view>
</view>
<view class="{{selected?'show':'hidden'}}"></view>
<view class="{{selected1?'show':'hidden'}}"></view>
<view class="{{selected2?'show':'hidden'}}"></view>
<view class="{{selected3?'show':'hidden'}}"></view>
<view class='live'><image src="https://xcx.hy720.com/wtt/live2.jpg"></image></view>

.nav{
    width: 94%;
    height: 60rpx;
    display: flex;
    flex-direction: row;
    padding-top: 22rpx;
    margin: 0 auto;
}
.default{
    line-height: 60rpx;
    text-align: center;
    width: 23%;
    color: #8f8f8f;
    font-weight: bold;
    font-size: 24rpx;
    background-color: #dddddd;
    height: 60rpx;
    display: block;
    border-radius: 20rpx;
}
.sere2{
    margin-left: 25rpx;
}
.show{
    display: block;
}
.hidden{
    display: none;
}  
.red{
    line-height: 60rpx;
    text-align: center;
    color: #fff;
    width: 23%;
    font-weight: bold;
    font-size: 24rpx;
    background-color: #7cbe67;
    height: 60rpx;
    display: block;
    border-radius: 20rpx;
    position: relative;      
}
.red span {
  position:absolute;
   bottom:-12px; 
   left:0; right:0; 
   margin:0 auto;
  width:0px;
  height:0px; 
  line-height:0px; 
  font-size:0;
  border-width:7px;
  border-style:solid dashed;
  border-color: #7cbe67 transparent transparent transparent ; 
}
.live{
  width: 94%;
  height: 200rpx;
  margin: 0 auto;
  display: block;
  margin-bottom: 15rpx;
  margin-top: 15rpx;
}
.live image{
  width: 100%;
  height: 200rpx;
  margin: 0 auto;
  display: block;
}

// pages/major/shuig.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    panic: 0,  //2019-8-22添加抢购初始页
    selected: true,
    selected1: false,
    selected2: false,
    selected3: false, 
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  //点击切换
  selected: function () {
    this.setData({
      selected: true,
      selected1: false,
      selected2: false,
      selected3: false
    })
  },
  selected1: function () {
    this.setData({
      selected: false,
      selected1: true,
      selected2: false,
      selected3: false
    })
  },
  selected2: function () {
    this.setData({
      selected: false,
      selected1: false,
      selected2: true,
      selected3: false
    })
  },
  selected3: function () {
    this.setData({
      selected: false,
      selected1: false,
      selected2: false,
      selected3: true
    })
  },

})

 

转载于:https://www.cnblogs.com/chabuer/p/11563066.html