111

manifest.json

@@ -82,24 +82,24 @@
     //         }
     //     }
     // }
-	"h5" : {
-	        "title" : "商城",
-	        "domain" : "",
-	        "router" : {
-	            "base" : "/index/",
-	            "mode" : "hash"
-	        },
-	        "devServer" : {
-	            "proxy" : {
-	                "/api" : {
-	                    "target" : "http://base.liuniu946.com", //请求的目标域名
-	                    "changeOrigin" : true,
-	                    // "secure": false,
-	                    "pathRewrite" : {
-	                                                // "^/api": "/"
-	                                        }
-	                }
-	            }
-	        }
-	    }  
+    "h5" : {
+        "title" : "商城",
+        "domain" : "",
+        "router" : {
+            "base" : "/index/",
+            "mode" : "hash"
+        },
+        "devServer" : {
+            "proxy" : {
+                "/api" : {
+                    "target" : "http://base.liuniu946.com", //请求的目标域名
+                    "changeOrigin" : true,
+                    // "secure": false,
+                    "pathRewrite" : {}
+                }
+            }
+        }
+    }
 }
+// "^/api": "/"
+

pages/index/index.vue

@@ -2,30 +2,16 @@
 	<view class="center">
 		<view class="top">
 			<image class="top-bg" src="../../static/img/top-bg.png" mode=""></image>
-			<view class="top-top flex">
-				<image class="ttop-left" src="../../static/img/log.png" mode=""></image>
-				<view class="ttop-right">
-					<view class="ttop-item" @click="nav('/pages/user/user')">
-						<image class="titem-image" src="../../static/img/sign.png" mode=""></image>
-						<view class="titem-font">签到</view>
-					</view>
-					<view class="ttop-item" @click="nav('/pages/index/message')">
-						<image class="titem-image" src="../../static/img/message.png" mode=""></image>
-						<view class="titem-font">消息</view>
-					</view>
-				</view>
-			</view>
 			<view class="top-main flex">
 				<view class="search-box flex" @click="clickSearch()">
 					<image class="search" src="../../static/img/search.png" mode=""></image>
-					<view class="search-font">搜索</view>
-				</view>
-				<view class="cart flex" @click="nav('/pages/category/category')">
-					<view class="cart-font">分类</view>
-					<image class="cart-image" src="../../static/img/cart.png" mode=""></image>
+					<view class="search-font">输入关键词搜索</view>
 				</view>
 			</view>
 		</view>
+		<swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange">
+			<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="bannerNavToUrl(item)"><image :src="item.pic" /></swiper-item>
+		</swiper>
 		<view class="navbar flex">
 			<view class="navbar-item" @click="nav('/pages/product/classify')">
 				<image class="nitem-image" src="../../static/img/autotrophy.png" mode=""></image>
@@ -114,7 +100,11 @@ import { tabbar } from '@/utils/tabbar.js';
 export default {
 	data() {
 		return {
+			titleNViewBackground: '',
+			swiperCurrent: 0,
+			swiperLength: 0,
 			dataList: '',
+			carouselList:[],//轮播图列表
 			tabbar: tabbar,
 			current: 0
 		};
@@ -128,9 +118,9 @@ export default {
 				.then(({ data }) => {
 					let goods = data.info;
 					this.dataList = goods.bastList; //精品推荐
+					this.carouselList = data.banner;
 				})
-				.catch(e => {
-				});
+				.catch(e => {});
 		},
 		nav(url) {
 			uni.navigateTo({
@@ -142,6 +132,12 @@ export default {
 				}
 			});
 		},
+		//轮播图切换修改背景色
+		swiperChange(e) {
+			const index = e.detail.current;
+			this.swiperCurrent = index;
+			this.titleNViewBackground = this.carouselList[index].background;
+		},
 		// 點擊搜索框
 		clickSearch() {
 			uni.navigateTo({
@@ -154,7 +150,7 @@ export default {
 			uni.navigateTo({
 				url: '/pages/product/product?id=' + id
 			});
-		},
+		}
 	}
 };
 </script>
@@ -169,7 +165,7 @@ page,
 .top {
 	position: relative;
 	width: 100%;
-	height: 692rpx;
+	height: 400rpx;
 	.top-bg {
 		position: absolute;
 		top: 0;
@@ -178,70 +174,27 @@ page,
 		width: 100%;
 		height: 100%;
 	}
-	.top-top {
-		position: relative;
-		z-index: 2;
-		padding: 34rpx 34rpx 0 28rpx;
-		.ttop-left {
-			width: 180rpx;
-			height: 60rpx;
-		}
-		.ttop-right {
-			display: flex;
-			align-items: center;
-			.ttop-item {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				margin-left: 46rpx;
-				.titem-image {
-					width: 36rpx;
-					height: 36rpx;
-				}
-				.titem-font {
-					font-size: 24rpx;
-					font-family: PingFang SC;
-					font-weight: 500;
-					color: #ffffff;
-					margin-top: 14rpx;
-				}
-			}
-		}
-	}
 	.top-main {
 		position: relative;
 		z-index: 2;
 		padding: 30rpx;
 		.search-box {
-			width: 532rpx;
-			background: #ffffff;
-			border-radius: 10rpx;
-			padding: 20rpx 20rpx 16rpx;
+			justify-content: center;
+			width: 698rpx;
+			height: 60rpx;
+			background: rgba(255, 240, 245, 0.4);
+			box-shadow: 0px 10rpx 20rpx 0px rgba(4, 114, 69, 0.22);
+			border-radius: 30rpx;
 			.search {
 				width: 34rpx;
 				height: 34rpx;
 			}
 			.search-font {
+				margin-left: 14rpx;
 				font-size: 28rpx;
 				font-family: PingFang SC;
 				font-weight: 500;
-				color: #333333;
-			}
-		}
-		.cart {
-			width: 128rpx;
-			background: #ffffff;
-			border-radius: 10rpx;
-			padding: 22rpx 20rpx 20rpx 20rpx;
-			.cart-font {
-				font-size: 24rpx;
-				font-family: PingFang SC;
-				font-weight: 500;
-				color: #333333;
-			}
-			.cart-image {
-				width: 28rpx;
-				height: 20rpx;
+				color: #ffffff;
 			}
 		}
 	}

unpackage/dist/build/h5/index.html

@@ -0,0 +1,2 @@
+<!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>商城</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
+            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/index/static/index.a5c69d49.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/index/static/js/chunk-vendors.d618d095.js></script><script src=/index/static/js/index.06262a99.js></script></body></html>

unpackage/dist/build/h5/static/css/cmy.css

@@ -0,0 +1,551 @@
+/*初始化类*/
+@font-face {
+	font-family: 'iconfont';
+	/* project id 1482221 */
+	src: url('https://at.alicdn.com/t/font_1482221_x9emymthrxs.eot');
+	src: url('https://at.alicdn.com/t/font_1482221_x9emymthrxs.eot?#iefix') format('embedded-opentype'),
+		url('https://at.alicdn.com/t/font_1482221_x9emymthrxs.woff2') format('woff2'),
+		url('https://at.alicdn.com/t/font_1482221_x9emymthrxs.woff') format('woff'),
+		url('https://at.alicdn.com/t/font_1482221_x9emymthrxs.ttf') format('truetype'),
+		url('https://at.alicdn.com/t/font_1482221_x9emymthrxs.svg#iconfont') format('svg');
+}
+
+.acea-row {
+	display: -webkit-box;
+	display: -moz-box;
+	display: -webkit-flex;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-lines: multiple;
+	-moz-box-lines: multiple;
+	-o-box-lines: multiple;
+	-webkit-flex-wrap: wrap;
+	-ms-flex-wrap: wrap;
+	flex-wrap: wrap
+}
+
+.acea-row.row-middle {
+	-webkit-box-align: center;
+	-moz-box-align: center;
+	-o-box-align: center;
+	-ms-flex-align: center;
+	-webkit-align-items: center;
+	align-items: center
+}
+
+.bg-color-red {
+	background-color: #e93323 !important;
+}
+
+.acea-row.row-right {
+	-webkit-box-pack: end;
+	-moz-box-pack: end;
+	-o-box-pack: end;
+	-ms-flex-pack: end;
+	-webkit-justify-content: flex-end;
+	justify-content: flex-end
+}
+
+.acea-row.row-between-wrapper {
+	-webkit-box-align: center;
+	-moz-box-align: center;
+	-o-box-align: center;
+	-ms-flex-align: center;
+	-webkit-align-items: center;
+	align-items: center;
+	-webkit-box-pack: justify;
+	-moz-box-pack: justify;
+	-o-box-pack: justify;
+	-ms-flex-pack: justify;
+	-webkit-justify-content: space-between;
+	justify-content: space-between
+}
+
+.acea-row.row-column-around {
+	-webkit-flex-direction: column;
+	-ms-flex-direction: column;
+	flex-direction: column;
+	justify-content: space-around;
+	-webkit-justify-content: space-around
+}
+
+.acea-row.row-center-wrapper {
+	-webkit-box-align: center;
+	-moz-box-align: center;
+	-o-box-align: center;
+	-ms-flex-align: center;
+	-webkit-align-items: center;
+	align-items: center;
+	-webkit-box-pack: center;
+	-moz-box-pack: center;
+	-o-box-pack: center;
+	-ms-flex-pack: center;
+	-webkit-justify-content: center;
+	justify-content: center
+}
+
+.iconfont {
+	font-family: "iconfont" !important;
+	font-size: 34rpx;
+	font-style: normal;
+	-webkit-font-smoothing: antialiased;
+	-webkit-text-stroke-width: 0rpx;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.iconedit:before {
+	content: "\e649";
+}
+
+.iconfavorfill:before {
+	content: "\e64b";
+}
+
+.iconfavor:before {
+	content: "\e64c";
+}
+
+.iconlocation:before {
+	content: "\e651";
+}
+
+.iconroundcheckfill:before {
+	content: "\e656";
+}
+
+.iconroundcheck:before {
+	content: "\e657";
+}
+
+.iconunfold:before {
+	content: "\e661";
+}
+
+.iconlikefill:before {
+	content: "\e668";
+}
+
+.iconlike:before {
+	content: "\e669";
+}
+
+.iconshop:before {
+	content: "\e676";
+}
+
+.iconcart:before {
+	content: "\e6af";
+}
+
+.icondelete:before {
+	content: "\e6b4";
+}
+
+.iconhome:before {
+	content: "\e6b8";
+}
+
+.iconcartfill:before {
+	content: "\e6b9";
+}
+
+.iconhomefill:before {
+	content: "\e6bb";
+}
+
+.iconlock:before {
+	content: "\e6c0";
+}
+
+.iconfriendadd:before {
+	content: "\e6ca";
+}
+
+.iconfold:before {
+	content: "\e6de";
+}
+
+.iconapps:before {
+	content: "\e729";
+}
+
+.iconadd:before {
+	content: "\e767";
+}
+
+.iconmove:before {
+	content: "\e768";
+}
+
+.icontriangledownfill:before {
+	content: "\e79b";
+}
+
+.icontriangleupfill:before {
+	content: "\e79c";
+}
+
+.iconshaixuan:before {
+	content: "\e74a";
+}
+
+.iconyanzhengma:before {
+	content: "\e684";
+}
+
+.iconjifen:before {
+	content: "\e60f";
+}
+
+.iconwuliuxinxi:before {
+	content: "\e62b";
+}
+
+.iconmessage:before {
+	content: "\e78a";
+}
+
+.iconsetting:before {
+	content: "\e78e";
+}
+
+.iconaddition:before {
+	content: "\e6e0";
+}
+
+.iconclose:before {
+	content: "\e6e9";
+}
+
+.iconenter:after {
+	content: "\e6f8";
+}
+
+.iconprompt:before {
+	content: "\e71b";
+}
+
+.iconreturn:before {
+	content: "\e720";
+}
+
+.iconsearch:before {
+	content: "\e741";
+}
+
+.iconpengyouquan:before {
+	content: "\e62c";
+}
+
+.iconweixin:before {
+	content: "\e60e";
+}
+
+.iconzhifubao:before {
+	content: "\e673";
+}
+
+.iconyue:before {
+	content: "\e618";
+}
+
+.iconweixin1:before {
+	content: "\e622";
+}
+
+.iconlock1:before {
+	content: "\e64d";
+}
+
+.iconuser:before {
+	content: "\e64e";
+}
+
+.iconchenggongtixianshouyi:before {
+	content: "\e64f";
+}
+
+.iconviptuiguangdingdan:before {
+	content: "\e650";
+}
+
+.icondaifukuan:before {
+	content: "\e652";
+}
+
+.icondaijiesuanshouyi:before {
+	content: "\e653";
+}
+
+.icondaidakuanshouyi:before {
+	content: "\e654";
+}
+
+.icondaifahuo:before {
+	content: "\e655";
+}
+
+.icondaishouhuoshouyi:before {
+	content: "\e658";
+}
+
+.icondaishouhuo:before {
+	content: "\e659";
+}
+
+.iconwuxiaoshouyi:before {
+	content: "\e65a";
+}
+
+.icontixianmingxi:before {
+	content: "\e65b";
+}
+
+.iconshouyi:before {
+	content: "\e65c";
+}
+
+.iconkouchutixianshouxufei:before {
+	content: "\e65d";
+}
+
+.iconyishenqingshouyi:before {
+	content: "\e65e";
+}
+
+.icontuihuanhuo:before {
+	content: "\e65f";
+}
+
+
+/*水平线*/
+.hr {
+	width: 100%;
+	position: relative;
+	border-bottom: 1px solid #dddddd;
+	/* height: 0.5rpx; */
+}
+
+/* 一行显示 */
+.clamp {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	display: block;
+}
+
+/* 二行显示 */
+.clamp2 {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+}
+
+/* 二行显示 */
+.ellipsis {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+}
+
+.common-hover {
+	background: #f5f5f5;
+}
+
+/* 角标 */
+.corner {
+	background-color: #e51c23;
+	position: absolute;
+	right: -18rpx;
+	top: -18rpx;
+	color: #FFFFFF;
+	text-align: center;
+	border-radius: 999px;
+	font-size: 24rpx !important;
+	min-width: 35rpx;
+	min-height: 35rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	line-height: 1;
+}
+
+.flex_item {
+	display: flex;
+	align-items: center;
+	/* justify-content: space-between; */
+}
+
+/* 左右顶格加上下居中 */
+.flex-between-center {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+/* flex布局-整体居中 */
+.flex-center {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.flex-start {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+}
+
+/*文字对齐*/
+.text-left {
+	text-align: left !important;
+}
+
+.text-center {
+	text-align: center !important;
+}
+
+.text-justify {
+	text-align: justify !important;
+}
+
+.text-right {
+	text-align: right !important;
+}
+
+.text-default {
+	color: #212121 !important;
+}
+
+.text-white {
+	color: #ffffff !important;
+}
+
+.text-primary {
+	color: #00bcd4 !important;
+}
+
+.text-success {
+	color: #009688 !important;
+}
+
+.text-info {
+	color: #03a9f4 !important;
+}
+
+.text-warning {
+	color: #ffc107 !important;
+}
+
+.text-danger {
+	color: #e51c23 !important;
+}
+
+.text-pink {
+	color: #e91e63 !important;
+}
+
+.text-purple {
+	color: #673ab7 !important;
+}
+
+.text-indigo {
+	color: #3f51b5 !important;
+}
+
+.text-gray {
+	color: #999999 !important;
+}
+
+.bg-default {
+	background-color: #f5f5f5 !important;
+}
+
+.bg-primary {
+	background-color: #00bcd4 !important;
+}
+
+.bg-success {
+	background-color: #009688 !important;
+}
+
+.bg-info {
+	background-color: #03a9f4 !important;
+}
+
+.bg-warning {
+	background-color: #FFB238 !important;
+}
+
+.bg-danger {
+	background-color: #DC4D46 !important;
+}
+
+.bg-pink {
+	background-color: #e91e63 !important;
+}
+
+.bg-purple {
+	background-color: #673ab7 !important;
+}
+
+.bg-indigo {
+	background-color: #3f51b5 !important;
+}
+
+.bg-white {
+	background-color: white !important;
+}
+
+.bg-gray {
+	background-color: #e3e3e3 !important;
+}
+
+/* 边框 */
+.border-radius-15 {
+	border-radius: 15rpx;
+}
+
+.border-radius-10 {
+	border-radius: 10rpx;
+}
+
+.border-radius-all {
+	border-radius: 1000rpx;
+}
+
+/* 底部边线 */
+.borde-b {
+	border-bottom: 1px solid #dddddd;
+}
+
+/* 弹性盒子 */
+.flex {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.items-left {
+	justify-content: flex-start;
+}
+
+.items-right {
+	justify-content: flex-end;
+}
+
+.flex-shrink-false {
+	flex-shrink: 0;
+}
+
+.flex-grow-true {
+	flex-grow: 1;
+}
+
+.position-relative {
+	position: relative;
+}