Taobao off new content

routing

Pull-refresh problem solving

image

New page

<template>
  <div>
    <section class="content">
      <div>
        <swiper loop auto @on-index-change="demo06_onIndexChange"
                :show-desc-mask="false" dots-position="center">
          <swiper-item v-for="(item, index) in demo06_list" :key="index">
            <img class="previewer-img" :src="item.img" @click="openPreviewer(index)">
          </swiper-item>
        </swiper>
        <div v-transfer-dom>
          <previewer :list="previewerList" ref="previewer" :options="previewerOptions"></previewer>
        </ div>           <span> Korea shallow mouth socks female cute socks female socks cotton socks to help low female deodorant breathable spring and summer solid color </ span>        <h3>      <div class = "the Detail-info">
      </ div>



        </h3>
        <div class="price">
          <span class="title">券后价</span>
          <span class="yPrice">¥4<s>.90</s></span>
          <span class="oPrice">¥6.90</span>
          <span class="monthSales">1637人已购</span>
        </div>
      </div>
      <div class="divide"></div>
      <div class="tpwd-copy">
        <button ref="copy_up" class="copy-btn" data-clipboard-target="#copy_tpwd" data-clipboard-action="copy"
                @click="copyUp">
          <img src="../assets/img/copy-img.png">
          {{copyResult}}
        </button>
        <div class="copy-area">
          <div><p id="copy_tpwd">(BYMAY4u9dII)</p></div>
          <span> a key copy copy, and then open the phone Taobao can receive vouchers to buy </ span> 
        </ div> 
      </ div> 
      <div class = "coupon"> 
        <a href="javascript:;"> 
          <span class = "AMOUNT"> <S> ¥ </ s> <B> 2 </ B> </ span> 
          <span class = "Time"> <S> <I> coupon </ i> life </ s > <b> 2019.06.14-2019.06.20 </ b> </ span> 
        </a> 
      </ div> 
      <div class = "the recommend"> 
        <label> recommended language </ label> 
        <the p-> "socks female Korea cute socks shallow mouth cotton socks female socks female solid color breathable to help low-odor spring and summer "</ the p-> 
      </ div> 
      <div class =" Divide "> </ div> 
      <div class="grade">
        <img src="https://static.lixiangou.net/images/shop/shop_rank_default_taobao.png">
        <span class="name">说不得袜业</span>
        <div class="dsr">
          <span>宝贝描述<b></b><i class="up"></i></span>
          <span>卖家服务<b></b><i class="up"></i></span>
          <span>物流服务<b></b><i class="up"></i></span>
        </div>
      </div>
      <div class="divide"></div>
      <div class="multi-image">
        <p>
          <button @click="mutilateImageChange">{{mutilate_image_button}}</button>
        </p>
        <div class="img-list" v-show="mutilate_image_show">
          <img src="https://img.alicdn.com/i4/72988896/O1CN01fis7CX2FaPw5jYqX5_!!72988896.jpg">
          <img src="https://img.alicdn.com/i1/72988896/TB2BwlpgF9gSKJjSspbXXbeNXXa_!!72988896.jpg">
          <img src="https://img.alicdn.com/i4/72988896/TB2dohqgGigSKJjSsppXXabnpXa_!!72988896.jpg">
          <img src="https://img.alicdn.com/i4/72988896/TB2PEXaki0TMKJjSZFNXXa_1FXa_!!72988896.jpg">
        </div>
      </div>
    </section>
    <div style="position: fixed;
    bottom: 0;
    width: 100%;">
      <tabbar>
        <tabbar-item class="tabbar_index">
          <img slot="icon" src="../assets/img/home.jpg" @click="toHome">
          <span slot="label" @click="toHome">首页</span>
        </tabbar-item>
        <tabbar-item class="tabbar_copy">
          <img slot="icon" src="../assets/img/copy-tpw.jpg">
          <span slot="label" ref="copy_down"
                data-clipboard-target="#copy_tpwd" data-clipboard-action="copy" @click="copyDown">一键复制淘口令</span>
        </tabbar-item>
      </tabbar>
    </div>
    <toast v-model="showCopyToast" type="text" :time="800" is-show-mask position="middle">{{copyToast}}</toast>
  </div>

</template>

<script>
  import {Flexbox, FlexboxItem, Toast, Swiper, GroupTitle, SwiperItem, XButton, Divider, Tabbar, TabbarItem,Previewer, TransferDom} from 'vux'

  const baseList = [{
    url: 'javascript:',
    img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',    URL: 'JavaScript:',  }, {
    title: 'you send a FUA'


    img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg', 
    title: 'give you a car' 
  }, { 
    url: 'JavaScript:', 
    img: 'HTTPS: //ww1.sinaimg. CN / Large / 663d3650gy1fq66vvsr72j20p00gogo2.jpg ', 404 // 
    title:' you send a trip ', 
    fallbackImg:' https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg ' 
  }]; 
  const = urlList baseList.map ( (Item, index) => ({ 
    URL: 'JavaScript: void (0)', 
    IMG: item.img, 
    fallbackImg: item.fallbackImg 
  })); 

  const previewerList baseList.map = ((Item, index) => ( { 
    the src: item.img 
  })); 

  Export default { 
    directives:{ 
      TransferDom 
    },
    name: 'Test', 
    Components: { 
      Swiper, 
      SwiperItem, 
      grouptitle, 
      XButton, 
      Divider, 
      Tabbar, 
      TabBarItem, 
      Toast, 
      flexbox, 
      FlexboxItem, 
      Previewer, 
      TransferDom 
    }, 
    Data () { 
      return { 
        demo06_list: urlList, / * Carousel FIG Details * / 
        demo06_index: 0, / * carousel Figure current index * / 
        mutilate_image_button: 'View graphic details', 
        mutilate_image_show: false, 
        copyBtnUp: null, // initialize memory copy button events 
        copyBtnDown: null, // initialize memory copy button events 
        copyResult: 'a copy key password scouring', 
        showCopyToast: to false,
        copyToast: '复制成功',
        previewerList: previewerList,
        previewerOptions: {
          getThumbBoundsFn(index) {
            // find thumbnail element
            let thumbnail = document.querySelectorAll('.previewer-img')[index];
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
            let rect = thumbnail.getBoundingClientRect();
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};
          }
        }
      }
    },
    mounted() {
      this.copyBtnUp = new this.clipboard(this.$refs.copy_up);
      this.copyBtnDown = new this.clipboard(this.$refs.copy_down);
    },
    methods: {
      openPreviewer() {
        this.$refs.previewer.show(this.demo06_index)
      },
      /**
       * 返回首页
       */
      toHome() {
        this.$router.push({path: '/'})
      },
      demo06_onIndexChange(index) {
        this.demo06_index = index
      },
      mutilateImageChange() {
        this.mutilate_image_show = !this.mutilate_image_show;
        if (this.mutilate_image_show) {
          this.mutilate_image_button = "收回图文详情"
        } else {
          this.mutilate_image_button = "查看图文详情"
        }
      },
      copyUp() {
        _Hmt.push // ([ '_ trackEvent', 'detail_share', 'Copy']); 
        / * This is triggered by clicking the button click event, with regard to the use of the clipboard will not repeat them, introducing the above has been told, and using methods * / official documents on 
        the let = _this the this; 
        the let Clipboard = _this.copyBtnUp; 
        clipboard.on ( 'success', () => { 
          this.copyResult = "copied successfully"; 
          the setTimeout (function () { 
            _this .copyResult = "key a password Ad copy" 
          }, 2000) 
        }); 
        clipboard.on ( 'error', () => { 
          this.copyResult = "copy failed password manually copy" 
        }); 
      }, 
      copyDown ( ) { 
        // _hmt.push ([ '_ trackEvent', 'detail_share', 'Copy']);
        / * This is triggered by clicking the button click event, with regard to the use of the clipboard will not repeat them, introducing the above has been told, and had to use on official documents * /
        = the this _this the let; 
        the let Clipboard = _this.copyBtnDown; 
        clipboard.on ( 'Success', () => { 
          this.copyResult = "copied successfully"; 
          this.copyToast = "copied successfully"; 
          this.showCopyToast = to true; 
          the setTimeout (function () { 
            _this.copyResult = "key a password Ad copy" 
          }, 2000) 
        }); 
        clipboard.on ( 'error', () => { 
          this.copyResult = "copy failed password manually copy" 
          the this .copyToast = "copy failed password manually copy"; 
          this.showCopyToast = to true; 
        }); 
      }, 
    } 
  } 
</ Script> 

<style type = "text / less" lang = "less" scoped="true">
  .content {
    padding-bottom: 1rem;
  }

  .detail-info {
    position: relative;
    padding: 15px;
    background-color: #FFF;
    h3 {
      color: #030303;
      font-size: 16px;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .price {
      position: relative;
      height: 28px;
      line-height: 28px;
      padding-top: 12px;
      .title {
        font-size: 0.25rem;
        color: #696969;
        margin-right: 0.05rem;
      }
      .yPrice {
        font-size: 0.35rem;
        color: #FB610C;
        margin-right: 0.05rem;
      }
      s {
        font-size: 0.25rem;
        text-decoration: none;
      }
      .oPrice {
        color: #C7C4C4;
        font-size: 0.25rem;
        text-decoration: line-through;
      }
      .monthSales {
        float: right;
        color: #696969;
        font-size: 0.25rem;
      }
    }
  }

  .divide {
    height: 10px;
    background: #F1F1F1;
  }

  .tpwd-copy {
    padding: 13px;
    text-align: center;
    .copy-btn {
      width: 100%;
      background: -webkit-gradient(linear, left top, right top, from(#FEA358), to(#F81F11));
      background: -webkit-linear-gradient(left, #FEA358, #F81F11);
      background: -o-linear-gradient(left, #FEA358, #F81F11);
      background: linear-gradient(to right, #FEA358, #F81F11);
      border-radius: 4px 4px 0 0;
      padding: 12px 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      img {
        width: 18px;
        height: 18px;
        margin-right: 6px;
        border: 0;
      }
    }
    button {
      color: #FFF;
      font-size: 14px;
      border: none;
    }
    .copy-area {
      color: #000;
      font-size: 14px;
      background: #FFF6F2;
      text-align: center;
      border: 1px dashed #FE814B;
      border-radius: 0 0 4px 4px;
      padding: 10px;
      p {
        font-weight: bold;
        margin-bottom: 5px;
      }
    }
  }

  .coupon {
    padding: 0.1rem 0.17rem;
    height: 1.3rem;
    background-image: url(../assets/img/quan-background.png);
    background-repeat: no-repeat;
    background-position: center 0.12rem;
    background-color: #F1F1F1;
    background-size: 95% 1.3rem;
    a {
      padding-left: .5rem;
      text-decoration: none;
    }
    .amount {
      display: inline-block;
      vertical-align: middle;
      margin-left: 0.18rem;
      line-height: 1.3rem;
      s {
        color: #FA6A06;
        font-size: 0.4rem;
        text-decoration: none;
      }
      b {
        color: #FA6A06;
        font-size: .65rem;
      }
    }
    .time {
      display: inline-block;
      vertical-align: middle;
      margin-left: 0.1rem;
      height: 0.67rem;
      s {
        display: block;
        text-decoration: none;
        font-size: 0.25rem;
        margin-bottom: 0.05rem;
        color: #696969;
      }
      i {
        color: #FE814B;
      }
      b {
        display: inline-block;
        color: #696969;
        font-size: .25rem;
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        margin-left: -.25rem;
      }
      .go-coupon {
        display: inline-block;
        vertical-align: middle;
        color: #FFFFFF;
        font-size: 0.14rem;
        margin-right: 0.25rem;
        line-height: 0.75rem;
        float: right;
      }
    }
  }

  .recommend {
    padding: 15px;
    background-color: #FFF;
    label {
      position: absolute;
      color: #030303;
      font-size: 14px;
      font-weight: 400;
      font-style: normal;
      font-variant: normal;
      padding-top: .2rem;
    }
    p {
      padding-left: 60px;
      line-height: 1.4;
      color: #696969;
    }
  }

  .grade {
    padding: 15px;
    background-color: #FFF;
    img {
      height: 10px;
      vertical-align: middle;
      border: 0;
    }
    label {
      position: absolute;
      color: #030303;
      font-size: 14px;
      font-weight: 400;
      font-style: normal;
      font-variant: normal;
    }
    .name {
      font-size: 0.25rem;
      color: #030303;
      margin-left: 0.1rem;
      vertical-align: middle;
    }
    .dsr {
      margin-top: 20px;
      font-size: 0;
      span {
        display: inline-block;
        text-align: center;
        color: #696969;
        font-size: 12px;
        font-weight: 400;
        font-style: normal;
        font-variant: normal;
        margin-right: 0.4rem;
        b {
          margin: 0;
          padding: 0;
          font-weight: normal;
          font-style: normal;
          font-variant: normal;
          text-decoration: none;
        }
      }
      .up {
        display: inline-block;
        width: 10px;
        height: 10px;
        background: url(../assets/img/grade-up.png) no-repeat;
        background-position: center;
        background-size: 10px 10px;
        margin-left: 5px;
      }
    }
  }

  .multi-image {
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    p button {
      background-color: transparent;
      color: #FE814B;
      font-size: 14px;
      padding: 0.07rem 0.28rem;
      border: 1px solid #FE814B;
      border-radius: 4px;
      position: relative;
      //隐藏溢出的径向渐变背景
      overflow: hidden;
    }
    p button:after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      //设置径向渐变
      background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
      background-repeat: no-repeat;
      background-position: 50%;
      transform: scale(10, 10);
      opacity: 0;
      transition: transform .1s, opacity .2s;
    }
    p button:active:after {
      transform: scale(0, 0);
      opacity: .3;
      //设置初始状态
      transition: 0s;
    }
    img {
      width: 100%;
      -webkit-touch-callout: default;
      border: 0;
    }
    .img-list {
      padding-top: 20px;
    }
  }

  .flex-demo {
    text-align: center;
    color: #fff;
    background-color: #20b907;
    border-radius: 4px;
    background-clip: padding-box;
  }

  .tabbar_index {
    color: white;
    /*background: #f54d23;*/
    border-radius: 1rem 1rem;
  }

  .tabbar_index {
    color: white;
    /*background: #FB874E;*/
    border-radius: 1rem 1rem;
  }
</style>

2. components directly routing Jump

<template>
  <div>
    <section class="content">
      <div>
        <swiper loop auto @on-index-change="demo06_onIndexChange"
                :show-desc-mask="false" dots-position="center">
          <swiper-item v-for="(item, index) in demo06_list" :key="index">
            <img class="previewer-img" :src="item.img" @click="openPreviewer(index)">
          </swiper-item>
        </swiper>
        <div v-transfer-dom>
          <previewer :list="previewerList" ref="previewer" :options="previewerOptions"></previewer>
        </div>
      </div>
      <div class="detail-info">
        <h3>
          <span>袜子女浅口韩国可爱船袜女纯棉袜子低帮短袜女纯色透气防臭春夏</span>
        </h3>
        <div class="price">
          <span class="title">券后价</span>
          <span class="yPrice">¥4<s>.90</s></span>
          <span class="oPrice">¥6.90</span>
          <span class="monthSales">1637人已购</span>
        </div>
      </div>
      <div class="divide"></div>
      <div class="tpwd-copy">
        <button ref="copy_up" class="copy-btn" data-clipboard-target="#copy_tpwd" data-clipboard-action="copy"
                @click="copyUp">
          <img src="../assets/img/copy-img.png">
          {{copyResult}}
        </button>
        <div class="copy-area">
          <div><p id="copy_tpwd">(BYMAY4u9dII)</p></div>
          <span>一键复制文案，然后打开手机淘宝即可领券购买</span>
        </div>
      </div>
      <div class="coupon">
        <a href="javascript:;">
          <span class="amount"><s>￥</s><b>2</b></span>
          <span class="time"><s><i>优惠券</i>使用期限</s><b>2019.06.14-2019.06.20</b></span>
        </a>
      </div>
      <div class="recommend">
        <label>推荐语</label>
        <p>“袜子女浅口韩国可爱船袜女纯棉袜子低帮短袜女纯色透气防臭春夏”</p>
      </div>
      <div class="divide"></div>
      <div class="grade">
        <img src="https://static.lixiangou.net/images/shop/shop_rank_default_taobao.png">
        <span class="name">说不得袜业</span>
        <div class="dsr">
          <span>宝贝描述<b></b><i class="up"></i></span>
          <span>卖家服务<b></b><i class="up"></i></span>
          <span>物流服务<b></b><i class="up"></i></span>
        </div>
      </div>
      <div class="divide"></div>
      <div class="multi-image">
        <p>
          <button @click="mutilateImageChange">{{mutilate_image_button}}</button>
        </p>
        <div class="img-list" v-show="mutilate_image_show">
          <img src="https://img.alicdn.com/i4/72988896/O1CN01fis7CX2FaPw5jYqX5_!!72988896.jpg">
          <img src="https://img.alicdn.com/i1/72988896/TB2BwlpgF9gSKJjSspbXXbeNXXa_!!72988896.jpg">
          <img src="https://img.alicdn.com/i4/72988896/TB2dohqgGigSKJjSsppXXabnpXa_!!72988896.jpg">
          <img src="https://img.alicdn.com/i4/72988896/TB2PEXaki0TMKJjSZFNXXa_1FXa_!!72988896.jpg">
        </div>
      </div>
    </section>
    <div style="position: fixed;
    bottom: 0;
    width: 100%;">
      <tabbar>
        <tabbar-item class="tabbar_index">
          <img slot="icon" src="../assets/img/home.jpg" @click="toHome">
          <span slot="label" @click="toHome">首页</span>
        </tabbar-item>
        <tabbar-item class="tabbar_copy">
          <img slot="icon" src="../assets/img/copy-tpw.jpg">
          <span slot="label" ref="copy_down"
                data-clipboard-target="#copy_tpwd" data-clipboard-action="copy" @click="copyDown">一键复制淘口令</span>
        </tabbar-item>
      </tabbar>
    </div>
    <toast v-model="showCopyToast" type="text" :time="800" is-show-mask position="middle">{{copyToast}}</toast>
  </div>

</template>

<script>
  import {Flexbox, FlexboxItem, Toast, Swiper, GroupTitle, SwiperItem, XButton, Divider, Tabbar, TabbarItem,Previewer, TransferDom} from 'vux'

  const baseList = [{
    url: 'javascript:',
    img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
    title: '送你一朵fua'
  }, {
    url: 'javascript:',
    img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
    title: '送你一辆车'
  }, {
    url: 'javascript:',
    img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg', // 404
    title: '送你一次旅行',
    fallbackImg: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg'
  }];
  const urlList = baseList.map((item, index) => ({
    url: 'javascript:void(0)',
    img: item.img,
    fallbackImg: item.fallbackImg
  }));

  const previewerList = baseList.map((item, index) => ({
    src: item.img
  }));

  export default {
    directives: {
      TransferDom
    },
    name: 'test',
    components: {
      Swiper,
      SwiperItem,
      GroupTitle,
      XButton,
      Divider,
      Tabbar,
      TabbarItem,
      Toast,
      Flexbox,
      FlexboxItem,
      Previewer,
      TransferDom
    },
    data() {
      return {
        demo06_list: urlList, /*轮播图详情*/
        demo06_index: 0, /*轮播图当前索引*/
        mutilate_image_button: '查看图文详情',
        mutilate_image_show: false,
        copyBtnUp: null, //存储初始化复制按钮事件
        copyBtnDown: null, //存储初始化复制按钮事件
        copyResult: '一键复制淘口令',
        showCopyToast: false,
        copyToast: '复制成功',
        previewerList: previewerList,
        previewerOptions: {
          getThumbBoundsFn(index) {
            // find thumbnail element
            let thumbnail = document.querySelectorAll('.previewer-img')[index];
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
            let rect = thumbnail.getBoundingClientRect();
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};
          }
        }
      }
    },
    mounted() {
      this.copyBtnUp = new this.clipboard(this.$refs.copy_up);
      this.copyBtnDown = new this.clipboard(this.$refs.copy_down);
    },
    methods: {
      openPreviewer() {
        this.$refs.previewer.show(this.demo06_index)
      },
      /**
       * 返回首页
       */
      toHome() {
        this.$router.push({path: '/'})
      },
      demo06_onIndexChange(index) {
        this.demo06_index = index
      },
      mutilateImageChange() {
        this.mutilate_image_show = !this.mutilate_image_show;
        if (this.mutilate_image_show) {
          this.mutilate_image_button = "收回图文详情"
        } else {
          this.mutilate_image_button = "查看图文详情"
        }
      },
      copyUp() {
        // _hmt.push(['_trackEvent', 'detail_share', 'copy']);
        /*这是点击按钮触发的点击事件，关于clipboard的使用就不再赘述了，上面介绍时已经讲述过，并且使用方法在官方文档上有*/
        let _this = this;
        let clipboard = _this.copyBtnUp;
        clipboard.on('success', () => {
          this.copyResult = "复制成功";
          setTimeout(function () {
            _this.copyResult = "一键复制淘口令"
          }, 2000)
        });
        clipboard.on('error', () => {
          this.copyResult = "复制失败，请手动复制口令"
        });
      },
      copyDown() {
        // _hmt.push(['_trackEvent', 'detail_share', 'copy']);
        /*这是点击按钮触发的点击事件，关于clipboard的使用就不再赘述了，上面介绍时已经讲述过，并且使用方法在官方文档上有*/
        let _this = this;
        let clipboard = _this.copyBtnDown;
        clipboard.on('success', () => {
          this.copyResult = "复制成功";
          this.copyToast = "复制成功";
          this.showCopyToast = true;
          setTimeout(function () {
            _this.copyResult = "一键复制淘口令"
          }, 2000)
        });
        clipboard.on('error', () => {
          this.copyResult = "复制失败，请手动复制口令"
          this.copyToast = "复制失败，请手动复制口令";
          this.showCopyToast = true;
        });
      },
    }
  }
</script>

<style type="text/less" lang="less" scoped="true">
  .content {
    padding-bottom: 1rem;
  }

  .detail-info {
    position: relative;
    padding: 15px;
    background-color: #FFF;
    h3 {
      color: #030303;
      font-size: 16px;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .price {
      position: relative;
      height: 28px;
      line-height: 28px;
      padding-top: 12px;
      .title {
        font-size: 0.25rem;
        color: #696969;
        margin-right: 0.05rem;
      }
      .yPrice {
        font-size: 0.35rem;
        color: #FB610C;
        margin-right: 0.05rem;
      }
      s {
        font-size: 0.25rem;
        text-decoration: none;
      }
      .oPrice {
        color: #C7C4C4;
        font-size: 0.25rem;
        text-decoration: line-through;
      }
      .monthSales {
        float: right;
        color: #696969;
        font-size: 0.25rem;
      }
    }
  }

  .divide {
    height: 10px;
    background: #F1F1F1;
  }

  .tpwd-copy {
    padding: 13px;
    text-align: center;
    .copy-btn {
      width: 100%;
      background: -webkit-gradient(linear, left top, right top, from(#FEA358), to(#F81F11));
      background: -webkit-linear-gradient(left, #FEA358, #F81F11);
      background: -o-linear-gradient(left, #FEA358, #F81F11);
      background: linear-gradient(to right, #FEA358, #F81F11);
      border-radius: 4px 4px 0 0;
      padding: 12px 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      img {
        width: 18px;
        height: 18px;
        margin-right: 6px;
        border: 0;
      }
    }
    button {
      color: #FFF;
      font-size: 14px;
      border: none;
    }
    .copy-area {
      color: #000;
      font-size: 14px;
      background: #FFF6F2;
      text-align: center;
      border: 1px dashed #FE814B;
      border-radius: 0 0 4px 4px;
      padding: 10px;
      p {
        font-weight: bold;
        margin-bottom: 5px;
      }
    }
  }

  .coupon {
    padding: 0.1rem 0.17rem;
    height: 1.3rem;
    background-image: url(../assets/img/quan-background.png);
    background-repeat: no-repeat;
    background-position: center 0.12rem;
    background-color: #F1F1F1;
    background-size: 95% 1.3rem;
    a {
      padding-left: .5rem;
      text-decoration: none;
    }
    .amount {
      display: inline-block;
      vertical-align: middle;
      margin-left: 0.18rem;
      line-height: 1.3rem;
      s {
        color: #FA6A06;
        font-size: 0.4rem;
        text-decoration: none;
      }
      b {
        color: #FA6A06;
        font-size: .65rem;
      }
    }
    .time {
      display: inline-block;
      vertical-align: middle;
      margin-left: 0.1rem;
      height: 0.67rem;
      s {
        display: block;
        text-decoration: none;
        font-size: 0.25rem;
        margin-bottom: 0.05rem;
        color: #696969;
      }
      i {
        color: #FE814B;
      }
      b {
        display: inline-block;
        color: #696969;
        font-size: .25rem;
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        margin-left: -.25rem;
      }
      .go-coupon {
        display: inline-block;
        vertical-align: middle;
        color: #FFFFFF;
        font-size: 0.14rem;
        margin-right: 0.25rem;
        line-height: 0.75rem;
        float: right;
      }
    }
  }

  .recommend {
    padding: 15px;
    background-color: #FFF;
    label {
      position: absolute;
      color: #030303;
      font-size: 14px;
      font-weight: 400;
      font-style: normal;
      font-variant: normal;
      padding-top: .2rem;
    }
    p {
      padding-left: 60px;
      line-height: 1.4;
      color: #696969;
    }
  }

  .grade {
    padding: 15px;
    background-color: #FFF;
    img {
      height: 10px;
      vertical-align: middle;
      border: 0;
    }
    label {
      position: absolute;
      color: #030303;
      font-size: 14px;
      font-weight: 400;
      font-style: normal;
      font-variant: normal;
    }
    .name {
      font-size: 0.25rem;
      color: #030303;
      margin-left: 0.1rem;
      vertical-align: middle;
    }
    .dsr {
      margin-top: 20px;
      font-size: 0;
      span {
        display: inline-block;
        text-align: center;
        color: #696969;
        font-size: 12px;
        font-weight: 400;
        font-style: normal;
        font-variant: normal;
        margin-right: 0.4rem;
        b {
          margin: 0;
          padding: 0;
          font-weight: normal;
          font-style: normal;
          font-variant: normal;
          text-decoration: none;
        }
      }
      .up {
        display: inline-block;
        width: 10px;
        height: 10px;
        background: url(../assets/img/grade-up.png) no-repeat;
        background-position: center;
        background-size: 10px 10px;
        margin-left: 5px;
      }
    }
  }

  .multi-image {
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    p button {
      background-color: transparent;
      color: #FE814B;
      font-size: 14px;
      padding: 0.07rem 0.28rem;
      border: 1px solid #FE814B;
      border-radius: 4px;
      position: relative;
      //隐藏溢出的径向渐变背景
      overflow: hidden;
    }
    p button:after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      //设置径向渐变
      background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
      background-repeat: no-repeat;
      background-position: 50%;
      transform: scale(10, 10);
      opacity: 0;
      transition: transform .1s, opacity .2s;
    }
    p button:active:after {
      transform: scale(0, 0);
      opacity: .3;
      //设置初始状态
      transition: 0s;
    }
    img {
      width: 100%;
      -webkit-touch-callout: default;
      border: 0;
    }
    .img-list {
      padding-top: 20px;
    }
  }

  .flex-demo {
    text-align: center;
    color: #fff;
    background-color: #20b907;
    border-radius: 4px;
    background-clip: padding-box;
  }

  .tabbar_index {
    color: white;
    /*background: #f54d23;*/
    border-radius: 1rem 1rem;
  }

  .tabbar_index {
    color: white;
    /*background: #FB874E;*/
    border-radius: 1rem 1rem;
  }
</style>

Taobao off new content

Guess you like