|
|
@@ -0,0 +1,687 @@
|
|
|
+<!-- 浏览记录 -->
|
|
|
+<template>
|
|
|
+ <div class="wrap">
|
|
|
+
|
|
|
+ <Header></Header>
|
|
|
+
|
|
|
+ <div class="top">
|
|
|
+ 首页
|
|
|
+ <img src="../../assets/icon-7.png" class="top-icon">
|
|
|
+ <span class="top-name">浏览记录</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="container">
|
|
|
+
|
|
|
+ <div class="leftsidebar">
|
|
|
+ <a href="javascript:void(0)">我的订单</a>
|
|
|
+ <a href="javascript:void(0)">我的购物车</a>
|
|
|
+ <a href="javascript:void(0)" class="active">浏览记录</a>
|
|
|
+ <a href="javascript:void(0)">我的收藏</a>
|
|
|
+ <a href="javascript:void(0)">我的积分</a>
|
|
|
+ <a href="javascript:void(0)">我的会员</a>
|
|
|
+ <a href="javascript:void(0)">卡券</a>
|
|
|
+ <a href="javascript:void(0)">消息</a>
|
|
|
+ <a href="javascript:void(0)">携手合伙人</a>
|
|
|
+ <a href="javascript:void(0)">签到奖励</a>
|
|
|
+ <a href="javascript:void(0)">我的分销</a>
|
|
|
+ <a href="javascript:void(0)">产品溯源</a>
|
|
|
+ <a href="javascript:void(0)">我的预约</a>
|
|
|
+ <a href="javascript:void(0)">意见反馈</a>
|
|
|
+ <a href="javascript:void(0)">资讯素材</a>
|
|
|
+ <a href="javascript:void(0)">在线客服</a>
|
|
|
+ <a href="javascript:void(0)">设置<img src="../../assets/sanjiao.png" class="sanjiao"></a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="rightsidebar">
|
|
|
+ <div class="rightsidebar-top-between">
|
|
|
+ <ul class="tab-list">
|
|
|
+ <li v-for="(item,index) in tabList" :class="{active:tabId==index}" @click="tabId=index"
|
|
|
+ :key="index">
|
|
|
+ <a href="javascript:void(0)">{{item.title}}</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <span class="font">完成</span>
|
|
|
+ </div>
|
|
|
+ <ul class="product-list">
|
|
|
+ <li>
|
|
|
+ <div class="product-top">
|
|
|
+ <img src="../../assets/circle.png" class="circle-img">
|
|
|
+ <span class="font-1">11月6日</span>
|
|
|
+ </div>
|
|
|
+ <ul class="product-sub-list">
|
|
|
+ <li>
|
|
|
+ <div class="img-box">
|
|
|
+ <img src="../../assets/img-3.png" class="productImg">
|
|
|
+ <img src="../../assets/circle.png" class="circle-Img">
|
|
|
+ </div>
|
|
|
+ <p class="product-price-row">
|
|
|
+ ￥394.00
|
|
|
+ <span>￥34.00</span>
|
|
|
+ </p>
|
|
|
+ <p class="product-msg">冻干柠檬片 蜂蜜柠檬茶 保留…</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="img-box">
|
|
|
+ <img src="../../assets/img-3.png" class="productImg">
|
|
|
+ <img src="../../assets/circle.png" class="circle-Img">
|
|
|
+ </div>
|
|
|
+ <p class="product-price-row">
|
|
|
+ ￥394.00
|
|
|
+ <span>￥34.00</span>
|
|
|
+ </p>
|
|
|
+ <p class="product-msg">冻干柠檬片 蜂蜜柠檬茶 保留…</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="img-box">
|
|
|
+ <img src="../../assets/img-3.png" class="productImg">
|
|
|
+ <img src="../../assets/circle.png" class="circle-Img">
|
|
|
+ </div>
|
|
|
+ <p class="product-price-row">
|
|
|
+ ￥394.00
|
|
|
+ <span>￥34.00</span>
|
|
|
+ </p>
|
|
|
+ <p class="product-msg">冻干柠檬片 蜂蜜柠檬茶 保留…</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="img-box">
|
|
|
+ <img src="../../assets/img-3.png" class="productImg">
|
|
|
+ <img src="../../assets/circle.png" class="circle-Img">
|
|
|
+ </div>
|
|
|
+ <p class="product-price-row">
|
|
|
+ ￥394.00
|
|
|
+ <span>￥34.00</span>
|
|
|
+ </p>
|
|
|
+ <p class="product-msg">冻干柠檬片 蜂蜜柠檬茶 保留…</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="img-box">
|
|
|
+ <img src="../../assets/img-3.png" class="productImg">
|
|
|
+ <img src="../../assets/circle.png" class="circle-Img">
|
|
|
+ </div>
|
|
|
+ <p class="product-price-row">
|
|
|
+ ￥394.00
|
|
|
+ <span>￥34.00</span>
|
|
|
+ </p>
|
|
|
+ <p class="product-msg">冻干柠檬片 蜂蜜柠檬茶 保留…</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="img-box">
|
|
|
+ <img src="../../assets/img-3.png" class="productImg">
|
|
|
+ <img src="../../assets/circle.png" class="circle-Img">
|
|
|
+ </div>
|
|
|
+ <p class="product-price-row">
|
|
|
+ ￥394.00
|
|
|
+ <span>￥34.00</span>
|
|
|
+ </p>
|
|
|
+ <p class="product-msg">冻干柠檬片 蜂蜜柠檬茶 保留…</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="img-box">
|
|
|
+ <img src="../../assets/img-3.png" class="productImg">
|
|
|
+ <img src="../../assets/circle.png" class="circle-Img">
|
|
|
+ </div>
|
|
|
+ <p class="product-price-row">
|
|
|
+ ￥394.00
|
|
|
+ <span>￥34.00</span>
|
|
|
+ </p>
|
|
|
+ <p class="product-msg">冻干柠檬片 蜂蜜柠檬茶 保留…</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="img-box">
|
|
|
+ <img src="../../assets/img-3.png" class="productImg">
|
|
|
+ <img src="../../assets/circle.png" class="circle-Img">
|
|
|
+ </div>
|
|
|
+ <p class="product-price-row">
|
|
|
+ ￥394.00
|
|
|
+ <span>￥34.00</span>
|
|
|
+ </p>
|
|
|
+ <p class="product-msg">冻干柠檬片 蜂蜜柠檬茶 保留…</p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="product-top">
|
|
|
+ <img src="../../assets/circle.png" class="circle-img">
|
|
|
+ <span class="font-1">11月6日</span>
|
|
|
+ </div>
|
|
|
+ <ul class="product-sub-list">
|
|
|
+ <li>
|
|
|
+ <div class="img-box">
|
|
|
+ <img src="../../assets/img-3.png" class="productImg">
|
|
|
+ <img src="../../assets/circle.png" class="circle-Img">
|
|
|
+ </div>
|
|
|
+ <p class="product-price-row">
|
|
|
+ ￥394.00
|
|
|
+ <span>￥34.00</span>
|
|
|
+ </p>
|
|
|
+ <p class="product-msg">冻干柠檬片 蜂蜜柠檬茶 保留…</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="img-box">
|
|
|
+ <img src="../../assets/img-3.png" class="productImg">
|
|
|
+ <img src="../../assets/circle.png" class="circle-Img">
|
|
|
+ </div>
|
|
|
+ <p class="product-price-row">
|
|
|
+ ￥394.00
|
|
|
+ <span>￥34.00</span>
|
|
|
+ </p>
|
|
|
+ <p class="product-msg">冻干柠檬片 蜂蜜柠檬茶 保留…</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="img-box">
|
|
|
+ <img src="../../assets/img-3.png" class="productImg">
|
|
|
+ <img src="../../assets/circle.png" class="circle-Img">
|
|
|
+ </div>
|
|
|
+ <p class="product-price-row">
|
|
|
+ ￥394.00
|
|
|
+ <span>￥34.00</span>
|
|
|
+ </p>
|
|
|
+ <p class="product-msg">冻干柠檬片 蜂蜜柠檬茶 保留…</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="img-box">
|
|
|
+ <img src="../../assets/img-3.png" class="productImg">
|
|
|
+ <img src="../../assets/circle.png" class="circle-Img">
|
|
|
+ </div>
|
|
|
+ <p class="product-price-row">
|
|
|
+ ￥394.00
|
|
|
+ <span>￥34.00</span>
|
|
|
+ </p>
|
|
|
+ <p class="product-msg">冻干柠檬片 蜂蜜柠檬茶 保留…</p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <ul class="information-list" v-if="tabId == 1">
|
|
|
+ <li>
|
|
|
+ <div class="information-top">
|
|
|
+ <img src="../../assets/circle.png" class="circle-img">
|
|
|
+ <span class="font-1">11月6日</span>
|
|
|
+ </div>
|
|
|
+ <div class="information-module">
|
|
|
+ <div class="select-box">
|
|
|
+ <img src="../../assets/circle.png" class="circle-img">
|
|
|
+ </div>
|
|
|
+ <div class="information-box">
|
|
|
+ <img src="../../assets/img-7.png" class="information-img">
|
|
|
+ <div class="information-box-sidebar">
|
|
|
+ <p class="information-name">互联网工作者加班突然猝死是否能理赔呢？</p>
|
|
|
+ <p class="information-msg">3.2万人浏览</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="information-module">
|
|
|
+ <div class="select-box">
|
|
|
+ <img src="../../assets/circle.png" class="circle-img">
|
|
|
+ </div>
|
|
|
+ <div class="information-box">
|
|
|
+ <img src="../../assets/img-7.png" class="information-img">
|
|
|
+ <div class="information-box-sidebar">
|
|
|
+ <p class="information-name">互联网工作者加班突然猝死是否能理赔呢？</p>
|
|
|
+ <p class="information-msg">3.2万人浏览</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="information-module">
|
|
|
+ <div class="select-box">
|
|
|
+ <img src="../../assets/circle.png" class="circle-img">
|
|
|
+ </div>
|
|
|
+ <div class="information-box">
|
|
|
+ <img src="../../assets/img-7.png" class="information-img">
|
|
|
+ <div class="information-box-sidebar">
|
|
|
+ <p class="information-name">互联网工作者加班突然猝死是否能理赔呢？</p>
|
|
|
+ <p class="information-msg">3.2万人浏览</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="information-top">
|
|
|
+ <img src="../../assets/circle.png" class="circle-img">
|
|
|
+ <span class="font-1">11月6日</span>
|
|
|
+ </div>
|
|
|
+ <div class="information-module">
|
|
|
+ <div class="select-box">
|
|
|
+ <img src="../../assets/circle.png" class="circle-img">
|
|
|
+ </div>
|
|
|
+ <div class="information-box">
|
|
|
+ <img src="../../assets/img-7.png" class="information-img">
|
|
|
+ <div class="information-box-sidebar">
|
|
|
+ <p class="information-name">互联网工作者加班突然猝死是否能理赔呢？</p>
|
|
|
+ <p class="information-msg">3.2万人浏览</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="information-module">
|
|
|
+ <div class="select-box">
|
|
|
+ <img src="../../assets/circle.png" class="circle-img">
|
|
|
+ </div>
|
|
|
+ <div class="information-box">
|
|
|
+ <img src="../../assets/img-7.png" class="information-img">
|
|
|
+ <div class="information-box-sidebar">
|
|
|
+ <p class="information-name">互联网工作者加班突然猝死是否能理赔呢？</p>
|
|
|
+ <p class="information-msg">3.2万人浏览</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="information-module">
|
|
|
+ <div class="select-box">
|
|
|
+ <img src="../../assets/circle.png" class="circle-img">
|
|
|
+ </div>
|
|
|
+ <div class="information-box">
|
|
|
+ <img src="../../assets/img-7.png" class="information-img">
|
|
|
+ <div class="information-box-sidebar">
|
|
|
+ <p class="information-name">互联网工作者加班突然猝死是否能理赔呢？</p>
|
|
|
+ <p class="information-msg">3.2万人浏览</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="sub-footer">
|
|
|
+ <div class="sub-footer-sidebar">
|
|
|
+ <div class="sub-footer-select">
|
|
|
+ <img src="../../assets/circle.png">全选
|
|
|
+ </div>
|
|
|
+ <span class="font-2">删除选中的商品</span>
|
|
|
+ <span class="font-2">移入收藏夹</span>
|
|
|
+ </div>
|
|
|
+ <button type="button" class="sub-footer-btn">删除</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <Footer></Footer>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import Header from '../../components/header.vue';
|
|
|
+ import Footer from '../../components/footer.vue';
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ Header,
|
|
|
+ Footer
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //选项卡
|
|
|
+ tabId: 0,
|
|
|
+ tabList: [{
|
|
|
+ title: "商品"
|
|
|
+ }, {
|
|
|
+ title: "资讯"
|
|
|
+ }],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //选项卡
|
|
|
+ active(index) {
|
|
|
+ this.active = index
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .wrap {
|
|
|
+ width: 100%;
|
|
|
+ margin: 40px 0 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top {
|
|
|
+ width: 1200px;
|
|
|
+ height: 76px;
|
|
|
+ line-height: 76px;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 19px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #484848;
|
|
|
+ font-size: 20px;
|
|
|
+ margin: 20px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-icon {
|
|
|
+ width: 10px;
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-name {
|
|
|
+ color: #F2501A;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ width: 1200px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-bottom: 43px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .leftsidebar {
|
|
|
+ width: 144px;
|
|
|
+ padding: 21px 0 28px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-right: 19px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .leftsidebar>a {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding: 0 0 0 29px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #000000;
|
|
|
+ font-size: 16px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .leftsidebar>a.active {
|
|
|
+ color: #F2501A;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .leftsidebar>a.active::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0, -50%);
|
|
|
+ width: 4px;
|
|
|
+ height: 26px;
|
|
|
+ background: url(../../assets/border.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sanjiao {
|
|
|
+ width: 14px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rightsidebar {
|
|
|
+ width: calc(100% - 163px);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rightsidebar-top-between {
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-list {
|
|
|
+ flex: 1;
|
|
|
+ height: 70px;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-list>li {
|
|
|
+ width: 200px;
|
|
|
+ height: 70px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-list>li>a {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: #111111;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-list>li.active>a {
|
|
|
+ background-color: #F2501A;
|
|
|
+ color: #FFFFFF;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .font {
|
|
|
+ color: #202020;
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 0 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .information-list {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .information-list>li {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 24px 19px 22px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .information-list>li:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .information-top {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 11px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .circle-img {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ margin-right: 21px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .font-1 {
|
|
|
+ color: #202020;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .information-module {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .information-module:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .information-box {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .information-img {
|
|
|
+ width: 134px;
|
|
|
+ height: 89px;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .information-box-sidebar {
|
|
|
+ flex: 1;
|
|
|
+ height: 80px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .information-name {
|
|
|
+ width: 100%;
|
|
|
+ color: #111111;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .information-msg {
|
|
|
+ width: 100%;
|
|
|
+ color: #919191;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-footer {
|
|
|
+ width: 100%;
|
|
|
+ height: 52px;
|
|
|
+ background-color: #E5E5E5;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 43px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-footer-sidebar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-footer-select {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-footer-select>img {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .font-2 {
|
|
|
+ color: #333333;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 29px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-footer-btn {
|
|
|
+ width: 110px;
|
|
|
+ height: 52px;
|
|
|
+ line-height: 52px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 20px;
|
|
|
+ background-color: #F2501A;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-list {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-list>li {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 20px 15px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-top {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-sub-list {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-sub-list>li {
|
|
|
+ width: 18.92%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-right: 1.35%;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+ .product-sub-list>li:nth-child(5n){
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .img-box {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .productImg {
|
|
|
+ width: 100%;
|
|
|
+ height: 192px;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .circle-Img {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 10px;
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-price-row {
|
|
|
+ width: 100%;
|
|
|
+ color: #F2501A;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-price-row>span {
|
|
|
+ margin-left: 12px;
|
|
|
+ color: #919191;
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-msg {
|
|
|
+ width: 100%;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ color: #777777;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+</style>
|
