Kaynağa Gözat

首页样式修改

lilei 4 yıl önce
ebeveyn
işleme
548ca1bc39

+ 2 - 2
components/uni-nav-bar/uni-nav-bar.vue

@@ -154,7 +154,7 @@
 		width: 750rpx;
 		height: $nav-height;
 		line-height: $nav-height;
-		font-size: 16px;
+		font-size: 14px;
 		// background-color: #ffffff;
 	}
 
@@ -173,7 +173,7 @@
 		/* #ifndef APP-NVUE */
 		display: flex;
 		/* #endif */
-		width: 160rpx;
+		width: 300rpx;
 		justify-content: flex-start;
 	}
 

+ 10 - 8
pages/index/index.vue

@@ -3,12 +3,13 @@
 		<!-- 顶部导航 -->
 		<uni-nav-bar 
 		:border="false" 
-		@click-left="toUserCenter" 
+		@clickLeft="toUserCenter" 
 		leftIcon="person-filled" 
 		 background-color="#fff" 
 		 :status-bar="true" 
 		 :fixed="true" 
 		 color="rgb(255,0,0)">
+		  <view slot="left">个人中心</view>
 		</uni-nav-bar>
 		<!-- 页面主体 -->
 		<view class="pageContent">
@@ -25,10 +26,10 @@
 							<cover-image class="img" src="/static/img/index-call.png"></cover-image>
 							<cover-view>联系客服</cover-view>
 						</cover-view>
-						<cover-view class="flex-item">
+						<!-- <cover-view class="flex-item">
 							<cover-image class="img" src="/static/img/index-discount.png"></cover-image>
 							<cover-view>优惠活动</cover-view>
-						</cover-view>
+						</cover-view> -->
 					</view>
 				</view>
 				<!-- 地图移动后返回原位置控件 -->
@@ -267,12 +268,11 @@
 				.flex-wrp {
 					display: flex;
 					flex-direction: column;
+					background: rgba(0, 0, 0, 0.3);
+					border-radius: 10rpx;
+					padding: 10rpx 0;
 				}
-
 				.flex-item {
-					background: rgba(0, 0, 0, 0.6);
-					margin-bottom: 10rpx;
-					border-radius: 10rpx;
 					width: 110rpx;
 					height: 110rpx;
 					font-size: 24rpx;
@@ -287,7 +287,6 @@
 						margin-bottom: 10rpx;
 					}
 				}
-				
 			}
 			.cover-location{
 				position: absolute;
@@ -303,6 +302,9 @@
 				bottom: calc(60rpx);
 				width: 80%;
 				left: calc(9%);
+				uni-button[type=warn]{
+					background: red;
+				}
 			}
 
 		}

+ 194 - 195
pages/work/index/index.vue

@@ -8,22 +8,14 @@
 				<view class="work-button flex-center" @click="startWork">
 					<!-- 扇形 -->
 					<view class="circle_process">
-					    <view class="wrapper right">
-					        <view class="circle rightcircle"></view>
-					    </view>
-					    <view class="wrapper left">
-					        <view class="circle leftcircle" id="leftcircle"></view>
-					    </view>
+						<view class="wrapper right"><view class="circle rightcircle" :style="{ transform: `rotate(${rdeg}deg)` }"></view></view>
+						<view class="wrapper left"><view class="circle leftcircle" :style="{ transform: `rotate(${ldeg}deg)` }"></view></view>
 					</view>
 					<view class="cirle-one"></view>
-					<view class="cirle-two flex-center" v-for="item in 60" >
-						<view class="sector" :style="{transform: `rotate(${item*6}deg)`}"></view>
-					</view>
+					<view class="cirle-two flex-center" v-for="item in 60"><view class="sector" :style="{ transform: `rotate(${item * 6}deg)` }"></view></view>
 					<view class="cirle-three flex-center"></view>
 					<view class="cirle-free w-start"></view>
-					<view class="cirle-sex flex-center">
-						点击启动
-					</view>
+					<view class="cirle-sex flex-center">点击启动</view>
 				</view>
 				<!-- 状态提示 -->
 				<view class="work-button-tips">设备准备就绪</view>
@@ -32,13 +24,24 @@
 		<!-- 说明提示 -->
 		<view class="work-tips">
 			<view class="work-dtime">
-				距离订单强制完成还剩 
-				<u-count-down @change="changeDtime" separator="zh" font-size="36" separator-size="28" color="#ff0000" :timestamp="timestamp" :show-days="false" :show-hours="false"></u-count-down>
+				距离订单强制完成还剩
+				<u-count-down
+					@change="changeDtime"
+					separator="zh"
+					font-size="36"
+					separator-size="28"
+					color="#ff0000"
+					:timestamp="timestamp"
+					:show-days="false"
+					:show-hours="false"
+				></u-count-down>
 			</view>
 			<view class="work-remarks">
 				<view class="title">说明:</view>
 				<view>
-					支付完成后<text class="red">请尽快启动洗车服务</text>,否则订单将在5分钟后自动完成。
+					支付完成后
+					<text class="red">请尽快启动洗车服务</text>
+					,否则订单将在5分钟后自动完成。
 				</view>
 			</view>
 		</view>
@@ -46,207 +49,203 @@
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				timestamp: 300
-			};
+export default {
+	data() {
+		return {
+			timestamp: 300,
+			rdeg: -135,
+			ldeg: -135,
+			step: 0,
+			interId:null
+		};
+	},
+	onLoad() {
+		
+	},
+	methods: {
+		// 倒计时监听,0 时自动结束订单
+		changeDtime(time) {
+			console.log(time);
+		},
+		// 启动按钮
+		startWork() {
+			this.interId = setInterval(()=>{
+				this.loading(this.step++)
+			},1000)
 		},
-		methods:{
-			// 倒计时监听,0 时自动结束订单
-			changeDtime(time){
-				console.log(time)
-			},
-			// 启动按钮
-			startWork(){
-				
-			},
-			// 进度条动画
-			loading(){
-				
+		// 进度条动画
+		loading(second) {
+			if (second <= 30) {
+				this.rdeg = -135 + 6 * second
+				this.ldeg = -135
+			} else {
+				this.rdeg = 45
+				this.ldeg = -135 + 6 * (second - 30)
 			}
 		}
 	}
+};
 </script>
 
 <style lang="scss">
-	// 扇形圆环
-	.circle_process{
-		position: absolute;
-		width: 380rpx;
-		height : 380rpx;
-	}
-	.circle_process .wrapper{
-		width: 190rpx;
-		height: 380rpx;
-		position: absolute;
-		top:0;
-		overflow: hidden;
-	}
-	.circle_process .right{
-		right:0;
-	}
-	.circle_process .left{
-		left:0;
-	}
-	.circle_process .circle{
-		width: 380rpx;
-		height: 380rpx;
-		border:20rpx solid transparent;
-		border-radius: 50%;
-		position: absolute;
-		top:0;
-		transform : rotate(-135deg);
-	}
-	.circle_process .rightcircle{
-		border-top:20rpx solid red;
-		border-right:20rpx solid red;
-		right:0;
-		-webkit-animation: circle_right 25s linear infinite;
-	}
-	.circle_process .leftcircle{
-		border-bottom:20rpx solid red;
-		border-left:20rpx solid red;
-		left:0;
-		-webkit-animation: circle_left 25s linear infinite;
-	}
-	@-webkit-keyframes circle_right{
-		0%{
-			-webkit-transform: rotate(-135deg);
-		}
-		50%,100%{
-			-webkit-transform: rotate(45deg);
-		}
-	}
-	@-webkit-keyframes circle_left{
-		0%,50%{
-			-webkit-transform: rotate(-135deg);
-		}
-		100%{
-			-webkit-transform: rotate(45deg);
-		}
+// 扇形圆环
+.circle_process {
+	position: absolute;
+	width: 380rpx;
+	height: 380rpx;
+}
+.circle_process .wrapper {
+	width: 190rpx;
+	height: 380rpx;
+	position: absolute;
+	top: 0;
+	overflow: hidden;
+}
+.circle_process .right {
+	right: 0;
+}
+.circle_process .left {
+	left: 0;
+}
+.circle_process .circle {
+	width: 380rpx;
+	height: 380rpx;
+	border: 20rpx solid transparent;
+	border-radius: 50%;
+	position: absolute;
+	top: 0;
+	transform: rotate(-135deg);
+}
+.circle_process .rightcircle {
+	border-top: 20rpx solid red;
+	border-right: 20rpx solid red;
+	right: 0;
+}
+.circle_process .leftcircle {
+	border-bottom: 20rpx solid red;
+	border-left: 20rpx solid red;
+	left: 0;
+}
+
+.work-pages {
+	width: 100%;
+	.flex-center {
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
-	 
-	.work-pages{
-		width: 100%;
-		.flex-center{
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-		.work-cons{
-			height: 60vh;
-			background-image: linear-gradient(0deg, #666, #333);
-			border-bottom-left-radius: 300rpx 30rpx;
-			border-bottom-right-radius: 300rpx 30rpx;
-			position: relative;
-			// 按钮
-			.work-button-wrap{
-				width: 400rpx;
-				margin-top: -50rpx;
-				.work-button{
-					background: #aaa;
+	.work-cons {
+		height: 60vh;
+		background-image: linear-gradient(0deg, #666, #333);
+		border-bottom-left-radius: 300rpx 30rpx;
+		border-bottom-right-radius: 300rpx 30rpx;
+		position: relative;
+		// 按钮
+		.work-button-wrap {
+			width: 400rpx;
+			margin-top: -50rpx;
+			.work-button {
+				background: #aaa;
+				border-radius: 100%;
+				width: 380rpx;
+				height: 380rpx;
+				cursor: pointer;
+				.cirle-one {
+					background: #444;
+					width: 370rpx;
+					height: 370rpx;
 					border-radius: 100%;
-					width: 380rpx;
-					height: 380rpx;
-					cursor: pointer;
-					.cirle-one{
-						background: #444;
-						width: 370rpx;
-						height: 370rpx;
-						border-radius: 100%;
-						position: absolute;
-					}
-					.cirle-two{
-						width: 370rpx;
-						height: 370rpx;
-						border-radius: 100%;
-						position: absolute;
-						.sector {
-							transform-origin:center center;
-							width: 350rpx;
-							height: 5rpx;
-							background: #aaa;
-						}
-					}
-					.cirle-three{
-						background: #444;
-						width: 280rpx;
-						height: 280rpx;
-						border-radius: 100%;
-						position: absolute;
-					}
-					.cirle-free{
-						width: 230rpx;
-						height: 230rpx;
-						border-radius: 100%;
-						position: absolute;
-						animation:mymove 5s infinite;
-					}
-					@keyframes mymove
-					{
-						0%{
-						transform: scale(1);  /*开始为原始大小*/
-						opacity:1
-						}
-						25%{
-							transform: scale(1.1); /*放大1.1倍*/
-							opacity:0.5
-						}
-						50%{
-							transform: scale(1);
-							opacity:1
-						}
-						75%{
-							transform: scale(1.1);
-							opacity:0.5
-						}
+					position: absolute;
+				}
+				.cirle-two {
+					width: 370rpx;
+					height: 370rpx;
+					border-radius: 100%;
+					position: absolute;
+					.sector {
+						transform-origin: center center;
+						width: 350rpx;
+						height: 5rpx;
+						background: #aaa;
 					}
-					.cirle-sex{
-						background-image: linear-gradient(-180deg, #888, #333 80%);
-						width: 210rpx;
-						height: 210rpx;
-						border-radius: 100%;
-						position: absolute;
-						color: #FFFFFF;
-						font-size: 28rpx;
-						color: #eee;
+				}
+				.cirle-three {
+					background: #444;
+					width: 280rpx;
+					height: 280rpx;
+					border-radius: 100%;
+					position: absolute;
+				}
+				.cirle-free {
+					width: 230rpx;
+					height: 230rpx;
+					border-radius: 100%;
+					position: absolute;
+					animation: mymove 5s infinite;
+				}
+				@keyframes mymove {
+					0% {
+						transform: scale(1); /*开始为原始大小*/
+						opacity: 1;
 					}
-					.w-start{
-						background: #ffcc00;
+					25% {
+						transform: scale(1.1); /*放大1.1倍*/
+						opacity: 0.5;
 					}
-					.w-stop{
-						background: #ff0000;
+					50% {
+						transform: scale(1);
+						opacity: 1;
 					}
-					&:active{
-						.cirle-sex{
-							background-image: linear-gradient(180deg, #888, #333 80%);
-						}
+					75% {
+						transform: scale(1.1);
+						opacity: 0.5;
 					}
 				}
-				.work-button-tips{
+				.cirle-sex {
+					background-image: linear-gradient(-180deg, #888, #333 80%);
+					width: 210rpx;
+					height: 210rpx;
+					border-radius: 100%;
+					position: absolute;
+					color: #ffffff;
+					font-size: 28rpx;
 					color: #eee;
-					text-align: center;
-					padding-top: 30rpx;
+				}
+				.w-start {
+					background: #ffcc00;
+				}
+				.w-stop {
+					background: #ff0000;
+				}
+				&:active {
+					.cirle-sex {
+						background-image: linear-gradient(180deg, #888, #333 80%);
+					}
 				}
 			}
-		}
-		.work-tips{
-			padding: 45rpx;
-			.work-dtime{
+			.work-button-tips {
+				color: #eee;
 				text-align: center;
-				font-weight: bold;
-				font-size: 34rpx;
+				padding-top: 30rpx;
 			}
-			.work-remarks{
-				padding-top: 50rpx;
-				.red{
-					color: red;
-				}
-				.title{
-					font-weight: bold;
-				}
+		}
+	}
+	.work-tips {
+		padding: 45rpx;
+		.work-dtime {
+			text-align: center;
+			font-weight: bold;
+			font-size: 34rpx;
+		}
+		.work-remarks {
+			padding-top: 50rpx;
+			.red {
+				color: red;
+			}
+			.title {
+				font-weight: bold;
 			}
 		}
 	}
+}
 </style>