zoukankan      html  css  js  c++  java
  • 淘宝客 新内容

    路由

     上拉刷新问题解决

     图片

    新页面

    <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>
  • 相关阅读:
    67. Add Binary
    66. Plus One
    64. Minimum Path Sum
    63. Unique Paths II
    How to skip all the wizard pages and go directly to the installation process?
    Inno Setup打包之先卸载再安装
    How to change the header background color of a QTableView
    Openstack object list 一次最多有一万个 object
    Openstack 的 Log 在 /var/log/syslog 里 【Ubuntu】
    Git 分支
  • 原文地址:https://www.cnblogs.com/oneNightStand/p/11028217.html
Copyright © 2011-2022 走看看