4.11新增

src/App.vue

@@ -7,7 +7,7 @@
 		name: 'app',
 		components: {},
 		mounted() {
-			this.$router.push('/health-encyclopedia/seasonal-health');
+			this.$router.push('/index/my-custom-gift');
 		},
 	}
 </script>

src/router/index.js

@@ -221,6 +221,11 @@ const routes = [
 		path: '/my/set-up',
 		component: () => import('../views/my/set-up.vue'),
 	},
+	// 设置-注销账户-注销须知
+	{
+		path: '/my/cancellation-notice',
+		component: () => import('../views/my/cancellation-notice.vue'),
+	},
 	// 浏览记录
 	{
 		path: '/my/browsing-history',

src/views/health-encyclopedia/seasonal-health.vue

@@ -33,8 +33,34 @@
 			</marquee>
 		</div>
 
+		<div class="video-box">
+			<video width="1200" height="222">
+				<source
+					src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
+					type="video/mp4">
+				</source>
+			</video>
+		</div>
+
 		<div class="container">
-			<ul class="list">
+			<ul class="list">
+				<li>
+					<div class="item-sidebar">
+						<div class="item-sidebar-name">
+							你感觉不舒服的时候，就是成长的时候
+						</div>
+						<p class="item-sidebar-msg">大暑是夏季最后一个节气，正值三伏天的“二伏”前后，十一年中气温最高最高……</p>
+						<div class="row">
+							<span class="font-1">3.2万人浏览</span>
+							<img class="icon" src="../../assets/icon-27.png">
+							<p class="num-row">
+								<img src="../../assets/collect.png">
+								3.2万人
+							</p>
+						</div>
+					</div>
+					<img src="../../assets/img-3.png" class="picture">
+				</li>
 				<li>
 					<div class="item-sidebar">
 						<div class="item-sidebar-name">
@@ -54,9 +80,10 @@
 				</li>
 				<li>
 					<div class="item-sidebar">
-						<div class="item-sidebar-top">
+						<div class="item-sidebar-name">
 							你感觉不舒服的时候，就是成长的时候
 						</div>
+						<p class="item-sidebar-msg">大暑是夏季最后一个节气，正值三伏天的“二伏”前后，十一年中气温最高最高……</p>
 						<div class="row">
 							<span class="font-1">3.2万人浏览</span>
 							<img class="icon" src="../../assets/icon-27.png">
@@ -67,7 +94,7 @@
 						</div>
 					</div>
 					<img src="../../assets/img-3.png" class="picture">
-				</li>
+				</li>
 			</ul>
 		</div>
 
@@ -238,92 +265,103 @@
 		background-color: #FFFFFF;
 		border-radius: 8px;
 		margin-bottom: 69px;
-	}
-	
-	.list {
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-	}
-	
-	.list>li {
-		width: 100%;
-		display: flex;
-		align-items: center;
-		padding: 20px 30px;
-		box-sizing: border-box;
-		border-bottom: 1px solid #F6F6F6;
-		box-sizing: border-box;
-	}
-	
-	.list>li:first-child {
-		border-top: 1px solid #F6F6F6;
-	}
-	
-	.list>li:last-child {
-		border-bottom: none;
-	}
-	
-	.item-sidebar {
-		flex: 1;
-		height: 189px;
-		display: flex;
-		flex-direction: column;
-	}
-	
-	.item-sidebar-name {
-		width: 100%;
-		line-height: 33px;
-		color: #202020;
-		font-size: 26px;
-		margin-bottom: 8px;
-	}
-	.item-sidebar-msg{
-		width: 100%;
-		line-height: 24px;
-		color: #A7A7A7;
-		font-size: 19px;
-	}
-	.tag {
-		width: 104px;
-		margin-right: 12px;
-		vertical-align: middle;
-	}
-	
-	.row {
-		width: 100%;
-		display: flex;
-		align-items: center;
-		margin-top: 10px;
-	}
-	
-	.font-1 {
-		color: #919191;
-		font-size: 19px;
-		margin-right: 50px;
-	}
-	
-	.icon {
-		width: 30px;
-		margin-right: 70px;
-	}
-	
-	.num-row {
-		display: flex;
-		align-items: center;
-		color: #919191;
-		font-size: 19px;
-	}
-	
-	.num-row>img {
-		width: 30px;
-		margin-right: 20px;
-	}
-	
-	.picture {
-		width: 189px;
-		height: 189px;
+	}
+
+	.list {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.list>li {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		padding: 20px 30px;
+		box-sizing: border-box;
+		border-bottom: 1px solid #F6F6F6;
+		box-sizing: border-box;
+	}
+
+	.list>li:first-child {
+		border-top: 1px solid #F6F6F6;
+	}
+
+	.list>li:last-child {
+		border-bottom: none;
+	}
+
+	.item-sidebar {
+		flex: 1;
+		height: 189px;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.item-sidebar-name {
+		width: 100%;
+		line-height: 33px;
+		color: #202020;
+		font-size: 26px;
+		margin-bottom: 10px;
+	}
+
+	.item-sidebar-msg {
+		width: 100%;
+		line-height: 24px;
+		color: #A7A7A7;
+		font-size: 19px;
+	}
+
+	.tag {
+		width: 104px;
+		margin-right: 12px;
+		vertical-align: middle;
+	}
+
+	.row {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		margin-top: 13px;
+	}
+
+	.font-1 {
+		color: #919191;
+		font-size: 19px;
+		margin-right: 50px;
+	}
+
+	.icon {
+		width: 30px;
+		margin-right: 70px;
+	}
+
+	.num-row {
+		display: flex;
+		align-items: center;
+		color: #919191;
+		font-size: 19px;
+	}
+
+	.num-row>img {
+		width: 30px;
+		margin-right: 20px;
+	}
+
+	.picture {
+		width: 189px;
+		height: 189px;
+		border-radius: 8px;
+		margin-left: 200px;
+	}
+
+	.video-box {
+		width: 1200px;
+		height: 222px;
+		border: 1px solid;
 		border-radius: 8px;
-		margin-left: 200px;
+		overflow: hidden;
+		margin: 20px auto;
 	}
 </style>

src/views/index/my-custom-gift.vue

@@ -16,7 +16,8 @@
 			<div class="box-top">
 				选择您的定制方案，如果没有选择的项目则<br />默认无要求。提交后平台会依据要求定制并<br />发给您确认，确认后批量定制。
 			</div>
-			<div class="box-content">
+			<div class="box-content">
+				<img src="../../assets/icon-30.png" class="box-content-icon" >
 				<div class="box-leftsidebar">
 					<p class="box-content-label">
 						基本信息
@@ -192,14 +193,25 @@
 		padding: 0 24px 38px;
 		box-sizing: border-box;
 	}
-
+	.box::after{
+		content: "";
+		width: 88px;
+		height: 120px;
+		position: absolute;
+		left: 0;
+		top: 0;
+		background: url(../../assets/icon-31.png) no-repeat;
+		background-size: 100% 100%;
+		z-index: 1;
+	}
 	.box-top {
 		width: 100%;
 		min-height: 140px;
 		padding: 32px 0 0;
 		box-sizing: border-box;
 		color: #FFFFFF;
-		font-size: 13px;
+		font-size: 13px;
+		z-index: 10;
 	}
 
 	.box-content {
@@ -209,9 +221,15 @@
 		display: flex;
 		align-items: flex-start;
 		padding: 21px 14px;
-		box-sizing: border-box;
+		box-sizing: border-box;
+		position: relative;
+	}
+	.box-content-icon{
+		width: 286px;
+		position: absolute;
+		right: -10px;
+		top: -120px;
 	}
-
 	.box-content-label {
 		width: 100%;
 		color: #333333;

src/views/my/bind-mobile-phone-number.vue

@@ -40,7 +40,18 @@
 						绑定手机号
 					</p>
 					<el-form ref="form" :model="form" label-width="80px" size="mini">
-
+						
+						<div class="form-row">
+							<span class="form-label"><span>*</span>已绑定手机号</span>
+							<div class="right-sidebar">
+								<div class="small-box">
+									<el-form-item style="width: 100%;">
+										<el-input v-model="form.now_number" placeholder="请输入手机号"></el-input>
+									</el-form-item>
+								</div>
+							</div>
+						</div>
+						
 						<div class="form-row">
 							<span class="form-label"><span>*</span>手机号</span>
 							<div class="right-sidebar">
@@ -90,7 +101,8 @@
 		},
 		data() {
 			return {
-				form: {
+				form: {
+					now_number:'16634567866',
 					number: '',
 					num: '',
 				}

src/views/my/browsing-history.vue

@@ -42,7 +42,7 @@
 					</ul>
 					<span class="font">完成</span>
 				</div>
-				<ul class="product-list">
+				<ul class="product-list" v-if="tabId == 0">
 					<li>
 						<div class="product-top">
 							<img src="../../assets/circle.png" class="circle-img">

src/views/my/cancellation-notice.vue

@@ -0,0 +1,207 @@
+<!-- 设置-注销账户-注销须知 -->
+<template>
+	<div class="wrap">
+
+		<Header></Header>
+
+		<div class="top">
+			首页
+			<img src="../../assets/icon-7.png" class="top-icon">
+			<span>设置</span>
+			<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)">浏览记录</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)" class="active">设置<img src="../../assets/sanjiao.png" class="sanjiao"></a>
+			</div>
+
+			<div class="rightsidebar">
+				<div class="box">
+					<p class="msg">
+						一、注销账户的后果
+					</p>
+					<div class="btn-box">
+						<button type="button">保存</button>
+					</div>
+				</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 {
+
+			};
+		},
+		methods: {
+
+
+		}
+	}
+</script>
+
+<style scoped>
+	input::placeholder,
+	textarea::placeholder {
+		color: #BBBBBB;
+	}
+
+	.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;
+	}
+
+	.box {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		background-color: #FFFFFF;
+		border-radius: 8px;
+	}
+	.msg{
+		width: 100%;
+		padding: 23px 30px;
+		box-sizing: border-box;
+		font-size: 14px;
+		color: #111111;
+	}
+	.btn-box {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 24px 0;
+		box-sizing: border-box;
+	}
+
+	.btn-box>button {
+		width: 214px;
+		height: 50px;
+		line-height: 50px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		color: #FFFFFF;
+		font-size: 16px;
+		background-color: #F2501A;
+		border-radius: 8px;
+	}
+</style>

src/views/my/message.vue

@@ -34,20 +34,43 @@
 
 			<div class="rightsidebar">
 				<ul class="top-nav-list">
-					<li>
-						<img src="../../assets/message-nav1.png">交易物流
-					</li>
-					<li>
-						<img src="../../assets/message-nav2.png">视频上新
+					<li v-for="(item,index) in tabList" :class="{active:tabId==index}" @click="tabId=index"
+						:key="index">
+						<img :src="item.icon">
+						{{item.title}}
 					</li>
+				</ul>
+				<ul class="trade-logistics-list" v-show="tabId==0">
 					<li>
-						<img src="../../assets/message-nav3.png">优惠活动
+						<a href="javascript:void(0)">
+							<p class="trade-logistics-top">
+								<span>您的订单已发货</span>
+								<span>10:47</span>
+							</p>
+							<div class="trade-logistics-module">
+								<img src="../../assets/img-2.png" class="trade-logistics-img">
+								<div class="trade-logistics-sidebar">
+									<p class="trade-logistics-name">您购买的【狂欢季】MINISO名创优品…已…</p>
+									<p class="trade-logistics-msg">查看物流信息</p>
+								</div>
+							</div>
+						</a>
 					</li>
 					<li>
-						<img src="../../assets/message-nav4.png">客服消息
+						<a href="javascript:void(0)">
+							<p class="trade-logistics-top">
+								<span>您的订单已发货</span>
+								<span>10:47</span>
+							</p>
+							<div class="trade-logistics-module">
+								<img src="../../assets/img-2.png" class="trade-logistics-img">
+								<div class="trade-logistics-sidebar">
+									<p class="trade-logistics-name">您购买的【狂欢季】MINISO名创优品…已…</p>
+									<p class="trade-logistics-msg">查看物流信息</p>
+								</div>
+							</div>
+						</a>
 					</li>
-				</ul>
-				<ul class="trade-logistics-list" v-show="status==1">
 					<li>
 						<a href="javascript:void(0)">
 							<p class="trade-logistics-top">
@@ -62,36 +85,91 @@
 								</div>
 							</div>
 						</a>
-					</li>
-					<li>
-						<a href="javascript:void(0)">
-							<p class="trade-logistics-top">
-								<span>您的订单已发货</span>
-								<span>10:47</span>
-							</p>
-							<div class="trade-logistics-module">
-								<img src="../../assets/img-2.png" class="trade-logistics-img">
-								<div class="trade-logistics-sidebar">
-									<p class="trade-logistics-name">您购买的【狂欢季】MINISO名创优品…已…</p>
-									<p class="trade-logistics-msg">查看物流信息</p>
-								</div>
-							</div>
-						</a>
-					</li>
-					<li>
-						<a href="javascript:void(0)">
-							<p class="trade-logistics-top">
-								<span>您的订单已发货</span>
-								<span>10:47</span>
-							</p>
-							<div class="trade-logistics-module">
-								<img src="../../assets/img-2.png" class="trade-logistics-img">
-								<div class="trade-logistics-sidebar">
-									<p class="trade-logistics-name">您购买的【狂欢季】MINISO名创优品…已…</p>
-									<p class="trade-logistics-msg">查看物流信息</p>
-								</div>
-							</div>
-						</a>
+					</li>
+				</ul>
+				<ul class="video-list" v-show="tabId==1">
+					<li>
+						<div class="video-top">
+
+						</div>
+						<div class="video-bottom">
+							<span class="font-1">医生开讲:亚健康到底是什么？</span>
+							<span class="font-2">10:10</span>
+						</div>
+					</li>
+					<li>
+						<div class="video-top">
+
+						</div>
+						<div class="video-bottom">
+							<span class="font-1">医生开讲:亚健康到底是什么？</span>
+							<span class="font-2">10:10</span>
+						</div>
+					</li>
+					<li>
+						<div class="video-top">
+
+						</div>
+						<div class="video-bottom">
+							<span class="font-1">医生开讲:亚健康到底是什么？</span>
+							<span class="font-2">10:10</span>
+						</div>
+					</li>
+				</ul>
+				<ul class="favourable-activity-list" v-show="tabId==2">
+					<li>
+						<p class="favourable-activity-top">双11第2波预售开启</p>
+						<div class="favourable-activity-center">
+							<img src="../../assets/nav-24.png" class="favourable-activity-img">
+							<p class="favourable-activity-name">健康好物付定金有买有赠!大牌爆款[汤臣倍健vb叶酸b2b6b12 c维c]抢先看</p>
+						</div>
+						<p class="favourable-activity-bottom">09:29</p>
+					</li>
+					<li>
+						<p class="favourable-activity-top">双11第2波预售开启</p>
+						<div class="favourable-activity-center">
+							<img src="../../assets/nav-24.png" class="favourable-activity-img">
+							<p class="favourable-activity-name">健康好物付定金有买有赠!大牌爆款[汤臣倍健vb叶酸b2b6b12 c维c]抢先看</p>
+						</div>
+						<p class="favourable-activity-bottom">09:29</p>
+					</li>
+					<li>
+						<p class="favourable-activity-top">双11第2波预售开启</p>
+						<div class="favourable-activity-center">
+							<img src="../../assets/nav-24.png" class="favourable-activity-img">
+							<p class="favourable-activity-name">健康好物付定金有买有赠!大牌爆款[汤臣倍健vb叶酸b2b6b12 c维c]抢先看</p>
+						</div>
+						<p class="favourable-activity-bottom">09:29</p>
+					</li>
+					<li>
+						<p class="favourable-activity-top">双11第2波预售开启</p>
+						<div class="favourable-activity-center">
+							<img src="../../assets/nav-24.png" class="favourable-activity-img">
+							<p class="favourable-activity-name">健康好物付定金有买有赠!大牌爆款[汤臣倍健vb叶酸b2b6b12 c维c]抢先看</p>
+						</div>
+						<p class="favourable-activity-bottom">09:29</p>
+					</li>
+				</ul>
+				<ul class="customer-service-list" v-show="tabId==3">
+					<li>
+						<img src="../../assets/message-nav4.png" class="customer-service-icon">
+						<div class="customer-service-sidebar">
+							<div class="customer-service-row-between">
+								<p class="customer-service-title">客服消息</p>
+								<span class="customer-service-time">昨天</span>
+							</div>
+							<p class="customer-service-msg">亲亲 求求你了 我也不想打扰你</p>
+						</div>
+					</li>
+					<li>
+						<img src="../../assets/message-nav4.png" class="customer-service-icon">
+						<div class="customer-service-sidebar">
+							<div class="customer-service-row-between">
+								<p class="customer-service-title">客服消息</p>
+								<span class="customer-service-time">昨天</span>
+							</div>
+							<p class="customer-service-msg">亲亲 求求你了 我也不想打扰你</p>
+						</div>
 					</li>
 				</ul>
 			</div>
@@ -113,7 +191,23 @@
 		},
 		data() {
 			return {
-				status:2
+				//选项卡
+				tabList: [{
+						title: '交易物流',
+						icon: require('../../assets/message-nav1.png'),
+					},
+					{
+						title: '视频上新',
+						icon: require('../../assets/message-nav2.png'),
+					}, {
+						title: '优惠活动',
+						icon: require('../../assets/message-nav3.png'),
+					}, {
+						title: '客服消息',
+						icon: require('../../assets/message-nav4.png'),
+					},
+				],
+				tabId: 0
 			};
 		},
 		methods: {
@@ -259,9 +353,9 @@
 
 	.trade-logistics-top {
 		width: 100%;
-		padding: 0 6px;
-		display: flex;
-		justify-content: space-between;
+		padding: 0 6px;
+		display: flex;
+		justify-content: space-between;
 		align-items: center;
 		box-sizing: border-box;
 		margin-bottom: 13px;
@@ -316,4 +410,175 @@
 		color: #919191;
 		font-size: 12px;
 	}
+
+	.customer-service-list {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.customer-service-list>li {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		padding: 10px 30px 10px 14px;
+		box-sizing: border-box;
+		background-color: #FFFFFF;
+		border-radius: 8px;
+		margin-bottom: 10px;
+	}
+
+	.customer-service-icon {
+		width: 48px;
+		height: 48px;
+		border-radius: 50%;
+		margin-right: 7px;
+	}
+
+	.customer-service-sidebar {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.customer-service-row-between {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 2px;
+	}
+
+	.customer-service-title {
+		color: #202020;
+		font-size: 16px;
+	}
+
+	.customer-service-time {
+		color: #A7A7A7;
+		font-size: 14px;
+	}
+
+	.customer-service-msg {
+		color: #919191;
+		font-size: 12px;
+	}
+
+	.video-list {
+		width: 100%;
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.video-list>li {
+		width: 32.6666%;
+		margin-bottom: 1%;
+		margin-right: 1%;
+		padding: 10px 12px 0;
+		box-sizing: border-box;
+		background-color: #FFFFFF;
+		border-radius: 8px;
+	}
+
+	.video-list>li:nth-child(3n) {
+		margin-right: 0;
+	}
+
+	.video-top {
+		width: 100%;
+		height: 126px;
+	}
+
+	.video-bottom {
+		width: 100%;
+		height: 38px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.font-1 {
+		flex: 1;
+		display: -webkit-box;
+		-webkit-line-clamp: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		-webkit-box-orient: vertical;
+		color: #000000;
+		font-size: 15px;
+	}
+
+	.font-2 {
+		color: #919191;
+		font-size: 11px;
+	}
+
+	.favourable-activity-list {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		padding: 15px 28px;
+		box-sizing: border-box;
+	}
+
+	.favourable-activity-list>li {
+		width: 32%;
+		display: flex;
+		flex-direction: column;
+		background-color: #FFFFFF;
+		border-radius: 8px;
+		margin-right: 2%;
+		margin-bottom: 11px;
+		padding: 0 40px 0 13px;
+		box-sizing: border-box;
+	}
+
+	.favourable-activity-list>li:nth-child(3n) {
+		margin-right: 0;
+	}
+
+	.favourable-activity-top {
+		color: #000000;
+		font-size: 16px;
+		width: 100%;
+		height: 37px;
+		line-height: 37px;
+		display: -webkit-box;
+		-webkit-line-clamp: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		-webkit-box-orient: vertical;
+	}
+
+	.favourable-activity-center {
+		display: flex;
+		align-items: center;
+	}
+
+	.favourable-activity-img {
+		width: 56px;
+		height: 56px;
+		border-radius: 4px;
+		margin-right: 18px;
+	}
+
+	.favourable-activity-name {
+		flex: 1;
+		display: -webkit-box;
+		-webkit-line-clamp: 3;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		-webkit-box-orient: vertical;
+		color: #000000;
+		font-size: 13px;
+	}
+
+	.favourable-activity-bottom {
+		width: 100%;
+		height: 44px;
+		line-height: 44px;
+		color: #919191;
+		font-size: 12px;
+	}
 </style>

src/views/my/my-order-details.vue

@@ -38,7 +38,15 @@
 								<button type="button" class="btn">退换</button>
 								<!-- 待支付显示 -->
 								<button type="button" class="btn border">立即付款</button>
-								<button type="button" class="btn">取消订单</button>
+								<button type="button" class="btn">取消订单</button>
+								<!-- 待收货显示 -->
+								<button type="button" class="btn border">确认收货</button>
+								<button type="button" class="btn">退换</button>
+								<button type="button" class="btn">查看物流</button>
+								<!-- 待评价显示 -->
+								<button type="button" class="btn border">去评价</button>
+								<button type="button" class="btn">退换</button>
+								<button type="button" class="btn">查看物流</button>
 							</div>
 						</div>
 					</div>
@@ -62,9 +70,17 @@
 					<p class="bottom-row">
 						<span class="bottom-row-name">创建时间:</span>2021-11-08 14:46:42
 					</p>
-					<!-- 待发货显示 -->
+					<!-- 待发货和待收货显示 -->
 					<p class="bottom-row">
 						<span class="bottom-row-name">付款时间:</span>2021-11-08 14:46:42
+					</p>
+					<!-- 待评价和待收货显示 -->
+					<p class="bottom-row">
+						<span class="bottom-row-name">发货时间:</span>2021-11-08 14:46:42
+					</p>
+					<!-- 待评价显示 -->
+					<p class="bottom-row">
+						<span class="bottom-row-name">成交时间:</span>2021-11-08 14:46:42
 					</p>
 				</div>
 			</div>

src/views/my/my-order.vue

@@ -103,6 +103,7 @@
 											<span class="font-3">(含运费:0.00)</span>
 										</div>
 										<div class="sub-item">
+											<span class="font-5">退款成功</span>
 											<span class="font-4">等待买家付款</span>
 											<span class="font-4">订单详情</span>
 										</div>
@@ -1094,5 +1095,15 @@
 
 	.cancel-footer>>>.el-button--primary {
 		background-color: #F2501A !important;
+	}
+	.font-5{
+		color: #F2501A;
+		font-size: 12px;
+	}
+	.sub-item>span{
+		margin-bottom: 3px;
+	}
+	.sub-item>span:last-child{
+		margin-bottom: 0;
 	}
 </style>

src/views/my/real-name-authentication.vue

@@ -98,7 +98,7 @@
 				fileReader.onload = (temp) => {
 					this.imgSrc = temp.target.result
 				}
-				fileReader.readAsDataURL(file)
+				fileReader.readAsDataURL(file) 
 			},
 		}
 	}

src/views/my/set-up.vue

@@ -134,7 +134,12 @@
 									<button type="button">删除</button>
 									<button type="button">修改</button>
 								</div>
-							</li>
+							</li>
+							<!-- 无内容时显示 -->
+							<div class="normal-box">
+								<img src="../../assets/normal-3.png">
+								暂无收货地址
+							</div>
 						</ul>
 					</div>
 					<div class="address-bottom">
@@ -218,13 +223,24 @@
 						</div>
 					</div>
 				</div>
+
+				<!-- 隐私政策： -->
+				<div v-show="tabId==2" class="privacy-policy-module">
+					<div class="logout-btn-box center">
+						<button type="button">已阅读</button>
+					</div>
+				</div>
 				<!-- 客服电话： -->
 				<div v-show="tabId==3" class="customer-service-module">
-					<span class="customer-service-label">客服电话：</span>
-					<p class="customer-service-row">
-						<span>4005665205</span>
-						<span>4005665205</span>
-					</p>
+					<div class="customer-service-box">
+						<span class="customer-service-label">客服电话：</span>
+						<p class="customer-service-row">
+							<span>4005665205</span>
+							<span>4005665205</span>
+						</p>
+					</div>
+					<img src="../../assets/icon-28.png" class="customer-service-img1">
+					<img src="../../assets/icon-29.png" class="customer-service-img2">
 				</div>
 				<!-- 注销用户 -->
 				<div v-show="tabId==4" class="logout-module">
@@ -630,8 +646,31 @@
 		border-radius: 8px;
 		padding: 44px 64px;
 		box-sizing: border-box;
+		position: relative;
+	}
+
+	.customer-service-img1 {
+		width: 438px;
+		position: absolute;
+		left: 0;
+		top: 0;
+		z-index: 0;
+	}
+
+	.customer-service-img2 {
+		width: 178px;
+		position: absolute;
+		right: 143px;
+		bottom: 0;
+		z-index: 0;
+	}
+
+	.customer-service-box {
+		width: 100%;
+		z-index: 99;
 		display: flex;
 		align-items: flex-start;
+		position: relative;
 	}
 
 	.customer-service-label {
@@ -888,17 +927,49 @@
 	.form-btn-box {
 		width: 100%;
 		display: flex;
-		align-items: center;
+		align-items: center;
 		padding-bottom: 20px;
 	}
 
 	.form-btn-box>button {
 		font-size: 17px;
 		margin-right: 18px;
-	}
-	.form-btn-box>button:last-child{
-		border: 1px solid #E63D23;
-		background-color: #FFFFFF;
-		color: #F2501A;
+	}
+
+	.form-btn-box>button:last-child {
+		border: 1px solid #E63D23;
+		background-color: #FFFFFF;
+		color: #F2501A;
+	}
+
+	.privacy-policy-module {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		background-color: #FFFFFF;
+		border-radius: 8px;
+		padding: 23px 30px;
+		box-sizing: border-box;
+		font-size: 14px;
+		color: #111111;
+	}
+
+	.logout-btn-box.center {
+		justify-content: center;
+	}
+
+	.normal-box {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		color: #999999;
+		font-size: 12px;
+	}
+
+	.normal-box>img {
+		width: 280px;
+		margin-bottom: 7px;
 	}
 </style>