淘宝客 新内容

路由

 上拉刷新问题解决

 图片

新页面

<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;
     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 {
       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 {
         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;
         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;
       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 {
       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. 组件直接路由跳转

<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;
     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 {
       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 {
         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;
         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;
       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 {
       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>