图片

packages/card/detail.vue

@@ -46,7 +46,7 @@
 					scope: 'scope.writePhotosAlbum',
 					success: (res) => {
 						uni.downloadFile({
-							url: '../../static/cardimg1.jpg',
+							url: '/static/cardimg1.jpg',
 							filePath:filePath,
 							success(res) {
 								console.log(res)
@@ -77,7 +77,7 @@
 	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 	.changecontainer{
 		width: 100%;
 		background-image: url(../../static/bg-change.jpg);
@@ -92,7 +92,50 @@
 		background: #fff;
 		border-radius: 10rpx;
 		overflow: hidden;
-		padding: 54rpx 46rpx;
-	
+	}
+	.myswiper{
+		padding: 55rpx 44rpx 45rpx;
+	}
+	.myswiper image{
+		width: 100%;
+		height: auto;
+		border-radius: 10rpx;
+	}
+	.cardtitle{
+		margin-top: 54rpx;
+		font-size: 36rpx;
+		text-align: center;
+		color: #b98b44;
+	}
+	.cardinfobox{
+		position: relative;
+		border-top: 1rpx dashed #a4a5a4;
+		padding: 82rpx 25rpx;
+	}
+	.cardinfobox::before,.cardinfobox::after{
+		content: " ";
+		position: absolute;
+		display: inline-block;
+		width: 28rpx;
+		height: 28rpx;
+		border-radius: 50%;
+		background: #4a4b4a;
+		top: -14rpx;
+	}
+	.cardinfobox::before{
+		left: -14rpx;
+	}
+	.cardinfobox::after{
+		right: -14rpx;
+	}
+	.cardlist{
+		border-radius: 10rpx;
+		width: 100%;
+		background-image: url(../../static/cardbg.png);
+		background-repeat: no-repeat;
+		background-position: center center;
+		background-size: cover;
+		overflow: hidden;
+		box-shadow: 0 5rpx 16rpx rgba(0,0,0,.32);
 	}
 </style>

packages/card/index.vue

@@ -2,7 +2,7 @@
 	<view class="changecontainer">
 		<view class="cardindexbox">
 			<view class="myswiper">
-				<swiper class="swiper" circular :indicator-dots="true" :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor" :autoplay="autoplay" :interval="interval" :duration="duration">
+				<swiper class="swiper" circular :indicator-dots="true" :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor" :autoplay="autoplay" :interval="interval" :duration="duration" :current="currentSwiperIndex" @change="onSwiperChange">
 					<swiper-item>
 						<view class="swiper-item">
 							<image src="../../static/cardimg1.jpg" mode="widthFix"></image>
@@ -40,6 +40,7 @@
 				duration: 500,
 			  indicatorColor: 'rgba(204,204,203,.5)',
 				indicatorActiveColor: '#b98b44',
+				currentSwiperIndex:0,
 				form: {
 					code: '',
 				},
@@ -47,6 +48,10 @@
 			}
 		},
 		methods: {
+			onSwiperChange(e) {
+
+				this.currentSwiperIndex = e.detail.current;
+			},
 			getScanCode() {
 				// uni.scanCode({
 				// 	onlyFromCamera: false,
@@ -79,7 +84,7 @@
 	}
 </script>
 
-<style type="text/css" scoped lang="scss">
+<style scoped lang="scss">
 	.changecontainer{
 		width: 100%;
 		background-image: url(../../static/bg-change.jpg);
@@ -103,23 +108,37 @@
 	.swiper{
 		padding-bottom: 48rpx;
 		overflow: hidden;
-		.uni-swiper-wrapper{
+		
+	}
+	/deep/ swiper-item{
+		border-radius: 10rpx;
+		overflow: hidden;
+	}
+	//设置轮播的指示点大小
+	/deep/ .uni-swiper-dots{ 
+		bottom: -48rpx!important; 
+	}
+	/deep/ .uni-swiper-wrapper {
 			overflow: initial;
-		}
-		.uni-swiper-dots{
-			bottom: -48rpx;
-		}
-		.swiper-item image{
-			width: 100%;
-			height: auto;
-		}
+	}
+	/deep/ .wx-swiper-wrapper{
+			overflow: initial !important;
+	}
+	/deep/ .wx-swiper-dots {
+		bottom: -48rpx!important; 	
+	}
+
+	/deep/ .swiper-item image{
+		width: 100%;
+		height: auto;
+		// border-radius: 10rpx;
 	}
 	.formChange{
 		width: 450rpx;
 		margin: 0 auto;
 		margin-top: 104rpx;
 	}
-	.formitem{
+	/deep/ .u-form-item{
 		margin-bottom: 40rpx;
 		height: 74rpx;
 		width: 100%;
@@ -127,35 +146,47 @@
 		border-radius: 50rpx;
 		background-color: #f4f3f2;
 		border: none;
-		padding: 0;
-		padding-left: 104rpx;
-		padding-right: 40rpx;
+		padding: 0 !important;
 		border: none !important;
-		background-position: left 40rpx center;
-		background-size: 38rpx auto;
-		background-repeat: no-repeat;
 		font-size: 20rpx;
 		color: #676767;
 	}
-	.formitem.card_number{
-		background-image: url(../../static/icon-change1.png);
+	
+	/deep/ .u-form-item.password{
+		background-image: url(../../static/icon-change2.png);
 	}
-	.formitem u-input{
+	/deep/ .u-form-item .u-input__input{
 		display: block;
 		border: none;
 		width: 100%;
-		height: 100%;
-		line-height: 76rpx;
-		color: #676767;
-		font-size: 20rpx;
+		height: 74rpx;
+		line-height: 74rpx;
+		color: #676767 !important;
+		font-size: 20rpx !important;
+		padding-left: 104rpx;
+		padding-right: 40rpx;
+		background-position: left 40rpx center;
+		background-size: 38rpx auto;
+		background-repeat: no-repeat;
 	}
-	.formitem.submitform{
-		color: #b98b44;
-		font-size: 24rpx;
+	/deep/ .card_number .u-input__input{
+		background-image: url(../../static/icon-change1.png) !important;
+	}
+	/deep/ .password .u-input__input{
+		background-image: url(../../static/icon-change2.png) !important;
+	}
+	/deep/ .u-btn{
+		color: #b98b44 !important;
+		font-size: 24rpx !important;
 		font-weight: bold;
 		padding: 0;
+		height: 74rpx !important;
+		width: 100%;
+		line-height: 74rpx !important;
+		border-radius: 50rpx;
+		background-color: #f4f3f2 !important;
 	}
-	.formitem.submitform::after{
+	/deep/ .u-btn::after{
 		display: none;
 	}
 </style>

pages/change/change.vue

@@ -150,9 +150,7 @@
 		background-color: #f4f3f2;
 		border: none;
 		padding: 0 !important;
-		
 		border: none !important;
-		
 		font-size: 20rpx;
 		color: #676767;
 	}
@@ -160,11 +158,6 @@
 	/deep/ .u-form-item.password{
 		background-image: url(../../static/icon-change2.png);
 	}
-	/deep/ .u-input{
-
-		
-	}
-
 	/deep/ .u-form-item .u-input__input{
 		display: block;
 		border: none;