8-5 cart&category

components/seckill/seckill.vue

@@ -1,248 +1,264 @@
-<template>
-	<view class="seckill-section m-t" v-if="show">
-		<view class="s-header">
-			<view class="f-left-icon"></view>
-			<view class="tit-box"><text class="tit">限时秒杀</text></view>
-			<view class="tip-box">
-				<text class="tip" v-if="status == 1">{{ showTime }}点场结束</text>
-				<text class="tip" v-if="status == 2">距离下场开始</text>
-				<text class="tip" v-if="status == 0">当天活动已结束</text>
-				<uni-countdown v-if="status == 1 || status == 2" :show-day="false" :hour="stopTimeH" :minute="stopTimeM" :second="stopTimeS"></uni-countdown>
-			</view>
-			<view class="textNav iconfont iconenter" @click="navTo('/pages/product/seckill')">更多</view>
-		</view>
-		<scroll-view class="floor-list" scroll-x>
-			<view class="scoll-wrapper position-relative" @click="navTo('/pages/product/seckill')">
-				<view v-for="(item, index) in list" :key="index" class="floor-item">
-					<image class="list-image" :src="item.image" mode="aspectFill"></image>
-					<text class="title clamp">{{ item.title }}</text>
-					<text class="price">￥{{ item.price }}</text>
-				</view>
-				<view v-if="list.length == 0" class="floor-item ">
-					<image class="list-image" mode="aspectFill"></image>
-					<text class="title clamp"></text>
-					<text class="price"></text>
-				</view>
-				<view v-if="list.length == 0" class="noGoodsBg"><view>敬请期待</view></view>
-			</view>
-		</scroll-view>
-	</view>
-</template>
-
-<script>
-import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
-import { getSeckillList, getSeckillClass } from '@/api/product.js';
-import { timeComputed } from '@/utils/rocessor.js';
-export default {
-	components: {
-		uniCountdown
-	},
-	data() {
-		return {
-			list: [],
-			page: 1,
-			limit: 10,
-			showTime: '', //显示的时间
-			showTImeId: '', //显示时间id用于查询数据
-			stopTimeH: 0,
-			stopTimeM: 0,
-			stopTimeS: 0,
-			// 判断是否所有活动已经结束
-			stop: false, //活动是否已经结束
-			show: false, //是否显示活动
-			status: 0 //获取状态值1为有活动开始中 2为活动未开始 0为活动已经结束
-		};
-	},
-	created: function(e) {
-		// 载入分类
-		this.getClass();
-	},
-	methods: {
-		navTo(url) {
-			uni.navigateTo({
-				url
-			});
-		},
-		getList() {
-			getSeckillList(
-				{
-					page: this.page,
-					limit: this.limit
-				},
-				this.showTImeId
-			)
-				.then(e => {
-					this.list = e.data;
-				})
-				.catch(e => {
-					console.log(e);
-				});
-		},
-		getClass() {
-			let obj = this;
-			getSeckillClass({})
-				.then(({ data }) => {
-					let arr = data.seckillTime;
-					// 用于判断是否有数据
-					let showDate = false;
-					for (var i = 0; i < arr.length; i++) {
-						let ar = arr[i];
-						if (ar.status === 1 || ar.status === 2) {
-							obj.status = ar.status;
-							// 保存要显示的场次时间
-							obj.showTime = ar.time;
-							// 保存要显示活动商品的id
-							obj.showTImeId = ar.id;
-							// 保存当前状态值
-							// 计算倒计时时间
-							if (ar.status === 1) {
-								obj.timeComputed(ar.stop * 1000);
-							} else {
-								// 获取需要开始
-								let arTime = ar.time.split(':');
-								let h = arTime[0];
-								let m = arTime[1];
-								let time = new Date();
-								// 设置时间
-								time.setHours(h, m, 0);
-								obj.timeComputed(time.getTime());
-							}
-							// 获取商品列表
-							obj.getList();
-							// 保存当前有活动在举行
-							showDate = true;
-							// 任务查询结束跳出循环
-							break;
-						}
-					}
-					// 判断是否有活动
-					if (arr.length > 0) {
-						obj.show = true;
-					}
-					// 判断今天活动是否已经全部结束
-					if (!showDate) {
-						// 保存活动结束最后一个小时的活动商品
-						obj.showTImeId = arr[arr.length - 1].id;
-						// 活动已经结束
-						obj.status = 0;
-						// 获取结束时的商品
-						obj.getList();
-						console.log(obj.status);
-					}
-					// 如果所有场次均已经结束
-				})
-				.catch(e => {
-					uni.showModal({
-						title: JSON.stringify(e)
-					});
-				});
-		},
-		// 计算倒计时时间
-		timeComputed(da) {
-			let obj = this;
-			let stopTime = timeComputed(da)
-			obj.stopTimeH =stopTime.hours;
-			obj.stopTimeM = stopTime.minutes;
-			obj.stopTimeS =stopTime.seconds;
-		}
-	}
-};
-</script>
-
-<style lang="scss">
-/* 秒杀专区 */
+<template>
+	<view class="seckill-section m-t" v-if="show">
+		<view class="s-header">
+			<image src="" mode="" class="sk-img"></image>
+			<view class="tit-box"><text class="tit">限时秒杀</text></view>
+			<view class="tip-box">
+				<text class="tip" v-if="status == 1">{{ showTime }}点场结束</text>
+				<text class="tip" v-if="status == 2">距离下场开始</text>
+				<text class="tip" v-if="status == 0">当天活动已结束</text>
+				<uni-countdown 
+					v-if="status == 1 || status == 2" 
+					:show-day="false" 
+					:hour="stopTimeH" 
+					:minute="stopTimeM" 
+					:second="stopTimeS"
+					:color="'#fff'"
+					:backgroundColor="'#FF4C4C'"
+					:splitorColor="'#FF4C4C'"
+				></uni-countdown>
+			</view>
+			<view class="textNav iconfont iconenter" @click="navTo('/pages/product/seckill')">更多</view>
+		</view>
+		<scroll-view class="floor-list" scroll-x>
+			<view class="scoll-wrapper position-relative" @click="navTo('/pages/product/seckill')">
+				<view v-for="(item, index) in list" :key="index" class="floor-item">
+					<image class="list-image" :src="item.image" mode="aspectFill"></image>
+					<text class="title clamp">{{ item.title }}</text>
+					<text class="price">￥{{ item.price }}</text>
+				</view>
+				<view v-if="list.length == 0" class="floor-item ">
+					<image class="list-image" mode="aspectFill"></image>
+					<text class="title clamp"></text>
+					<text class="price"></text>
+				</view>
+				<view v-if="list.length == 0" class="noGoodsBg"><view>敬请期待</view></view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
+import { getSeckillList, getSeckillClass } from '@/api/product.js';
+import { timeComputed } from '@/utils/rocessor.js';
+export default {
+	components: {
+		uniCountdown
+	},
+	data() {
+		return {
+			list: [],
+			page: 1,
+			limit: 10,
+			showTime: '', //显示的时间
+			showTImeId: '', //显示时间id用于查询数据
+			stopTimeH: 0,
+			stopTimeM: 0,
+			stopTimeS: 0,
+			// 判断是否所有活动已经结束
+			stop: false, //活动是否已经结束
+			show: false, //是否显示活动
+			status: 0 //获取状态值1为有活动开始中 2为活动未开始 0为活动已经结束
+		};
+	},
+	created: function(e) {
+		// 载入分类
+		this.getClass();
+	},
+	methods: {
+		navTo(url) {
+			uni.navigateTo({
+				url
+			});
+		},
+		getList() {
+			getSeckillList(
+				{
+					page: this.page,
+					limit: this.limit
+				},
+				this.showTImeId
+			)
+				.then(e => {
+					this.list = e.data;
+				})
+				.catch(e => {
+					console.log(e);
+				});
+		},
+		getClass() {
+			let obj = this;
+			getSeckillClass({})
+				.then(({ data }) => {
+					let arr = data.seckillTime;
+					// 用于判断是否有数据
+					let showDate = false;
+					for (var i = 0; i < arr.length; i++) {
+						let ar = arr[i];
+						if (ar.status === 1 || ar.status === 2) {
+							obj.status = ar.status;
+							// 保存要显示的场次时间
+							obj.showTime = ar.time;
+							// 保存要显示活动商品的id
+							obj.showTImeId = ar.id;
+							// 保存当前状态值
+							// 计算倒计时时间
+							if (ar.status === 1) {
+								obj.timeComputed(ar.stop * 1000);
+							} else {
+								// 获取需要开始
+								let arTime = ar.time.split(':');
+								let h = arTime[0];
+								let m = arTime[1];
+								let time = new Date();
+								// 设置时间
+								time.setHours(h, m, 0);
+								obj.timeComputed(time.getTime());
+							}
+							// 获取商品列表
+							obj.getList();
+							// 保存当前有活动在举行
+							showDate = true;
+							// 任务查询结束跳出循环
+							break;
+						}
+					}
+					// 判断是否有活动
+					if (arr.length > 0) {
+						obj.show = true;
+					}
+					// 判断今天活动是否已经全部结束
+					if (!showDate) {
+						// 保存活动结束最后一个小时的活动商品
+						obj.showTImeId = arr[arr.length - 1].id;
+						// 活动已经结束
+						obj.status = 0;
+						// 获取结束时的商品
+						obj.getList();
+						console.log(obj.status);
+					}
+					// 如果所有场次均已经结束
+				})
+				.catch(e => {
+					uni.showModal({
+						title: JSON.stringify(e)
+					});
+				});
+		},
+		// 计算倒计时时间
+		timeComputed(da) {
+			let obj = this;
+			let stopTime = timeComputed(da);
+			obj.stopTimeH = stopTime.hours;
+			obj.stopTimeM = stopTime.minutes;
+			obj.stopTimeS = stopTime.seconds;
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+/* 秒杀专区 */
 .seckill-section {
-	background-color: #fff;
-	padding: 4rpx 30rpx 24rpx;
-	.s-header {
-		display: flex;
-		align-items: center;
-		height: 92rpx;
-		line-height: 1;
-		.tit-box {
-			flex-shrink: 0;
-		}
-		.tit {
-			@extend %font-title;
-		}
-		.f-left-icon {
-			@extend %f-left-icon;
-		}
-		.textNav {
-			line-height: 1;
-			padding: 15rpx 0;
-			flex-shrink: 0;
-			flex-grow: 1;
-			min-width: 100rpx;
-		}
-		.tip-box {
-			flex-grow: 1;
-			display: flex;
-			justify-content: flex-start;
-			align-items: center;
-		}
-		.tip {
-			font-size: $font-sm;
-			color: $font-color-light;
-			padding-left: 10rpx;
-			padding-right: 10rpx;
-		}
-		.timer {
-			display: inline-block;
-			width: 40rpx;
-			height: 36rpx;
-			text-align: center;
-			line-height: 36rpx;
-			margin-right: 14rpx;
-			font-size: $font-sm + 2rpx;
-			color: #fff;
-			border-radius: 2px;
-			background: rgba(0, 0, 0, 0.8);
-		}
-		.iconenter {
-			font-size: $font-sm;
-			color: $font-color-light;
-			flex: 1;
-			text-align: right;
-		}
-	}
-	.floor-list {
-		white-space: nowrap;
-		background-color: white;
-		padding: 20rpx;
-		border-radius: 5rpx;
-		// box-shadow: $box-shadow;
-	}
-	.scoll-wrapper {
-		display: flex;
-		align-items: flex-start;
-		.noGoodsBg {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			height: 100%;
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			color: $font-color-light;
-		}
-		.floor-item {
-			width: 207rpx;
-			margin-right: 20rpx;
-			font-size: $font-sm + 2rpx;
-			color: $font-color-dark;
-			line-height: 1.8;
-			.list-image {
-				width: 207rpx;
-				height: 207rpx;
+	background-color: #fff;
+	padding: 4rpx 20rpx 24rpx;
+	.s-header {
+		display: flex;
+		align-items: center;
+		height: 92rpx;
+		line-height: 1;
+		.sk-img {
+			width: 36rpx;
+			height: 36rpx;
+			background-color: red;
+			border-radius: 50%;
+			margin-right: 9rpx;
+		}
+		.tit-box {
+			flex-shrink: 0;
+		}
+		.tit {
+			@extend %font-title;
+		}
+		.f-left-icon {
+			@extend %f-left-icon;
+		}
+		.textNav {
+			line-height: 1;
+			padding: 15rpx 0;
+			flex-shrink: 0;
+			flex-grow: 1;
+			min-width: 100rpx;
+		}
+		.tip-box {
+			flex-grow: 1;
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+		}
+		.tip {
+			font-size: $font-sm;
+			color: $font-color-light;
+			padding-left: 10rpx;
+			padding-right: 10rpx;
+		}
+		.timer {
+			display: inline-block;
+			width: 40rpx;
+			height: 36rpx;
+			text-align: center;
+			line-height: 36rpx;
+			margin-right: 14rpx;
+			font-size: $font-sm + 2rpx;
+			color: #fff;
+			border-radius: 2px;
+			background: rgba(0, 0, 0, 0.8);
+		}
+		.iconenter {
+			font-size: $font-sm;
+			color: $font-color-light;
+			flex: 1;
+			text-align: right;
+		}
+	}
+	.floor-list {
+		white-space: nowrap;
+		background-color: white;
+		padding: 20rpx;
+		border-radius: 5rpx;
+		// box-shadow: $box-shadow;
+	}
+	.scoll-wrapper {
+		display: flex;
+		align-items: flex-start;
+		.noGoodsBg {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 100%;
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			color: $font-color-light;
+		}
+		.floor-item {
+			width: 207rpx;
+			margin-right: 20rpx;
+			font-size: $font-sm + 2rpx;
+			color: $font-color-dark;
+			line-height: 1.8;
+			.list-image {
+				width: 207rpx;
+				height: 207rpx;
 				border-radius: 10rpx;
-				background-color: red;
-			}
-			.price {
-				color: $color-red;
-			}
-		}
-	}
-}
+				background-color: red;
+			}
+			.price {
+				color: $color-red;
+			}
+		}
+	}
+}
 </style>

pages.json

@@ -3,7 +3,7 @@
 			"path": "pages/index/index",
 			"style": {
 				"enablePullDownRefresh": true,
-				"navigationStyle": "custom",
+				"navigationStyle": "custom",
 				"navigationBarTitleText": "商城首页"
 			}
 		},
@@ -404,7 +404,7 @@
 						"searchInput": {
 							"backgroundColor": "rgba(231, 231, 231,.7)",
 							"borderRadius": "16px",
-							"placeholder": "商品搜索",
+							"placeholder": "输入关键词搜索",
 							"disabled": true,
 							"placeholderColor": "#606266",
 							"align": "left"
@@ -439,7 +439,7 @@
 	},
 	"tabBar": {
 		"color": "#C0C4CC",
-		"selectedColor": "#5DBC7C",
+		"selectedColor": "#FF4C4C",
 		"borderStyle": "black",
 		"backgroundColor": "#ffffff",
 		"list": [{

pages/cart/cart.vue

@@ -12,7 +12,16 @@
 				<view class="navigator" @click="navToLogin">去登陆></view>
 			</view>
 		</view>
-		<view v-else>
+		<view v-else>
+			<!-- 购物车头部 -->
+			<view class="cart-hand flex">
+				<view class="hand-tit">
+					购物车共 <text>{{ ' '+cartList.length}} 件</text>商品
+				</view>
+				<view class="hand-btn" @click="clearCart()">
+					清空购物车
+				</view>
+			</view>
 			<!-- 列表 -->
 			<view class="cart-list">
 				<block v-for="(item, index) in cartList" :key="item.id">
@@ -30,9 +39,9 @@
 						</view>
 						<view class="item-right">
 							<text class="clamp title">{{ item.productInfo.store_name }}</text>
-							<text class="attr">{{ item.attr_val }}</text>
+							<text class="attr">{{ item.productInfo.attrInfo.suk }}</text>
 							<text class="price">¥{{ item.productInfo.price }}</text>
-							<uni-number-box
+							<!-- <uni-number-box
 								class="step"
 								:min="1"
 								:max="item.productInfo.stock"
@@ -41,9 +50,14 @@
 								:isMin="item.cart_num === 1"
 								:index="index"
 								@eventChange="numberChange"
-							></uni-number-box>
+							></uni-number-box> -->
+							<view class="munbox flex" >
+								<image src="../../static/icon/reduce.png" mode="" @click="reduce(item,index)"></image>
+								<input type="number" :value="item.cart_num" disabled/>
+								<image src="../../static/icon/add.png" mode="" @click="add(item)"></image>
+							</view>
 						</view>
-						<text class="del-btn iconfont iconclose" @click="deleteCartItem(index)"></text>
+						<!-- <text class="del-btn iconfont iconclose" @click="deleteCartItem(index)"></text> -->
 					</view>
 				</block>
 			</view>
@@ -51,7 +65,7 @@
 			<view class="action-section">
 				<view class="checkbox">
 					<view class="iconfont iconroundcheckfill icon-checked-box" @click="check('all')" :class="{ 'icon-checked': allChecked }"></view>
-					<view class="clear-btn" @click="allChecked ? clearCart() : ''" :class="{ show: allChecked }"><text>清空</text></view>
+					<!-- <view class="clear-btn" @click="allChecked ? clearCart() : ''" :class="{ show: allChecked }"><text>清空</text></view> -->
 				</view>
 				<view class="total-box">
 					<text class="price">¥{{ total }}</text>
@@ -102,7 +116,32 @@ export default {
 	computed: {
 		...mapState('user', ['hasLogin'])
 	},
-	methods: {
+	methods: {
+		reduce(item,index) {
+			if(item.cart_num == 1) {
+				uni.showModal({
+					content: '删除该商品？',
+					success: e => {
+						if (e.confirm) {
+							this.deleteCartItem(index)
+						}
+					}
+				});
+				
+			}else {
+				item.cart_num--
+				this.newNumberChange(item)
+			}
+		},
+		add(item) {
+			console.log(item)
+			if(item.productInfo.stock > item.cart_num) {
+				item.cart_num++
+				this.newNumberChange(item)
+			}else {
+				return 
+			}
+		},
 		//请求数据
 		async loadData() {
 			let obj = this;
@@ -175,6 +214,16 @@ export default {
 					console.log(e);
 				});
 			this.calcTotal();
+		},
+		newNumberChange(item) {
+			getCartNum({ id: item.id, number: item.cart_num })
+				.then(e => {
+					console.log(e);
+				})
+				.catch(function(e) {
+					console.log(e);
+				});
+			this.calcTotal();
 		},
 		//删除
 		deleteCartItem(index) {
@@ -278,13 +327,20 @@ export default {
 	}
 }
 /* 购物车列表项 */
-.cart-item {
+.cart-item {
+	width: 710rpx;
+	height: 210rpx;
+	background: #FFFFFF;
+	box-shadow: 0px 0px 10rpx 0rpx rgba(0, 0, 0, 0.1);
+	border-radius: 10rpx;
+	margin: 20rpx auto;
+	
 	display: flex;
 	position: relative;
-	padding: 30rpx 40rpx;
+	padding: 30rpx 26rpx 30rpx 80rpx;
 	.image-wrapper {
-		width: 230rpx;
-		height: 230rpx;
+		width: 150rpx;
+		height: 150rpx;
 		flex-shrink: 0;
 		position: relative;
 		image {
@@ -293,8 +349,11 @@ export default {
 	}
 	.checkbox {
 		position: absolute;
-		left: -16rpx;
-		top: -16rpx;
+		top: 0;
+		bottom: 0;
+		left: -65rpx;
+		margin: auto 0;
+		height: 50rpx;
 		z-index: 8;
 		font-size: 44rpx;
 		line-height: 1;
@@ -309,7 +368,23 @@ export default {
 		flex: 1;
 		overflow: hidden;
 		position: relative;
-		padding-left: 30rpx;
+		padding-left: 30rpx;
+		.munbox {
+			width: 144rpx;
+			height: 44rpx;
+			position: absolute;
+			bottom: 0;
+			right: 0;
+			input {
+				display: inline-block;
+				text-align: center;
+			}
+			image {
+				flex-shrink: 0;
+				width: 44rpx;
+				height: 44rpx;
+			}
+		}
 		.title,
 		.price {
 			font-size: $font-base + 2rpx;
@@ -321,14 +396,30 @@ export default {
 			font-size: $font-sm + 2rpx;
 			color: $font-color-light;
 			height: 50rpx;
-			line-height: 50rpx;
+			line-height: 50rpx;
+			
+			font-size: 26rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #999999;
 		}
 		.price {
-			height: 50rpx;
-			line-height: 50rpx;
+			// height: 50rpx;
+			// line-height: 50rpx;
+			padding-top: 20rpx;
+			font-size: 34rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #FF4C4C;
 		}
 		.step {
 			margin-top: 20rpx;
+		}
+		.title {
+			font-size: 34rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #333333;
 		}
 	}
 	.del-btn {
@@ -398,7 +489,8 @@ export default {
 		display: flex;
 		flex-direction: column;
 		text-align: right;
-		padding-right: 40rpx;
+		padding-right: 40rpx;
+		
 		.price {
 			font-size: $font-lg;
 			color: $font-color-dark;
@@ -425,5 +517,35 @@ export default {
 .action-section .checkbox.checked,
 .cart-item .checkbox.checked {
 	color: $base-color;
+}
+.cart-hand {
+	width: 750rpx;
+	height: 88rpx;
+	background: #FFFFFF;
+	font-size: 30rpx;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #333333;
+	line-height: 88rpx;
+	padding-left: 28rpx;
+	padding-right: 26rpx;
+	.hand-tit {
+		text {
+			color: #FF4C4C;
+		}
+	
+	}
+	.hand-btn {
+		width: 164rpx;
+		height: 62rpx;
+		border: 2rpx solid #FF4C4C;
+		border-radius: 31rpx;
+		font-size: 26rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #FF4C4C;
+		line-height: 62rpx;
+		text-align: center;
+	}
 }
 </style>

pages/category/category.vue

@@ -153,7 +153,9 @@ page,
 	color: $font-color-base;
 	position: relative;
 	&.active {
-		color: $base-color;
+		// color: $base-color;
+		color: #000;
+		font-weight: bold;
 		background: #f8f8f8;
 		&:before {
 			content: '';

pages/product/common/topSwiper.vue

@@ -1,11 +1,17 @@
 <template>
 	<view class="carousel">
-		<swiper indicator-dots :circular="true" duration="400">
+		<swiper indicator-dots :circular="true" duration="400" @change="swiperChange">
 			<swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="index">
 				<view class="image-wrapper"><image :src="item" class="loaded" mode="scaleToFill"></image></view>
 			</swiper-item>
-		</swiper>
-	</view>
+		</swiper>
+		<view class="swiper-dots">
+			<text class="num">{{ swiperCurrent + 1 }}</text>
+			<text class="sign">/</text>
+			<text class="num">{{ imgList | num }}</text>
+		</view>
+	</view>
+	
 </template>
 
 <script>
@@ -20,9 +26,26 @@ export default {
 	},
 	data() {
 		return {
-			
+			swiperCurrent: 0,
+			swiperLength: 0
 		};
-	},
+	},
+	filters: {
+		num(val) {
+			if(val){
+				
+				return val.length
+			}
+			return 0
+		}
+	},
+	methods: {
+		swiperChange(e) {
+			let index = e.detail.current;
+			this.swiperCurrent = index;
+			
+		}
+	}
 };
 </script>
 
@@ -31,7 +54,7 @@ export default {
 	/* #ifdef APP-PLUS */
 	padding-top: var(--status-bar-height);
 	/* #endif */
-	height: 700rpx;
+	height: 520rpx;
 	position: relative;
 	swiper {
 		height: 100%;
@@ -51,5 +74,25 @@ export default {
 			height: 100%;
 		}
 	}
+}
+.swiper-dots {
+	position: absolute;
+	bottom: 30rpx;
+	right: 26rpx;
+	color: red;
+	background-color: red;
+	z-index: 99;
+	width: 88rpx;
+	height: 42rpx;
+	background: #000000;
+	opacity: 0.5;
+	border-radius: 21rpx;
+
+	font-size: 28rpx;
+	font-family: PingFang SC;
+	font-weight: 500;
+	color: #FFFFFF;
+	line-height: 42rpx;
+	text-align: center;
 }
 </style>

uni.scss

@@ -4,7 +4,7 @@ $page-row-spacing: 30rpx;
 $page-color-base: #f8f8f8;//页面背景颜色
 $page-color-light: #f8f6fc;
 // 主题颜色
-$base-color: #5dbc7c;//项目颜色
+$base-color: #FF4C4C;//项目颜色
 $box-shadow-color:#5dbc7c;//阴影颜色
 $font-color:#5dbc7c;//字体颜色
 $font-color-spec: #5dbc7c;//可操作文字颜色
@@ -31,11 +31,11 @@ $uni-border-color:#ebeef5;
 $color-yellow: #fd5b23;
 $color-gray: #999999;
 $color-green: #5dbc7c;
-$color-red: #dd524d;
+$color-red: #FF4C4C;
 /* 图片加载中颜色 */
 $image-bg-color: #eee;
 /* 行为相关颜色 */
-$uni-color-primary: #5dbc7c;
+$uni-color-primary: #FF4C4C;
 $uni-color-success: #4cd964;
 $uni-color-warning: #f0ad4e;
 $uni-color-error: #dd524d;