完成首页

App.vue

@@ -14,4 +14,12 @@
 
 <style>
 	/*每个页面公共css */
+	::-webkit-scrollbar {  
+	    display: none;  
+	    width: 0 !important;  
+	    height: 0 !important;  
+	    -webkit-appearance: none;  
+	    background: transparent;  
+	}
+
 </style>

components/product-item/product-item.vue

@@ -0,0 +1,138 @@
+<template>
+	<view :class="type==='swiper'?'product-swiper-item':'product-list-item'" class="product-item">
+		<image class="image" :src="image" mode="scaleToFill"></image>
+		<view class="row row-1">
+			<text class="title"><text class="sxzg-icon">省心直供</text>{{title}}</text>
+		</view>
+		<view class="row row-2">
+			<text class="org-price">￥2.9</text>
+			<text class="sales">月销15.8万</text>
+		</view>
+		<view class="row row-3">
+			<text class="sxj-icon">省心价</text>
+			<text class="price">￥1.99</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			};
+		},
+		props: {
+			title: {
+				type: String,
+				default: "【工厂直营】加厚款手提垃圾袋加厚款手提垃圾袋加厚款手提垃圾袋加厚款手提垃圾袋*50支"
+			},
+			image: {
+				type: String,
+				default: ""
+			},
+			type: {
+				type: String,
+				default: "list"
+			},
+			sales: {
+				type: Number,
+				default: 0
+			},
+			orgPrice: {
+				type: Number,
+				default: 0
+			},
+			price: {
+				type: Number,
+				default: 0
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.product-item {
+		overflow: hidden;
+		border-radius: 18rpx;
+		background: white;
+		box-shadow: 0 0 10rpx #EEEEEE;
+		padding-bottom: 10upx;
+		display: inline-block;
+	}
+
+	.product-list-item {
+		width: 350rpx;
+		.image {
+			width: 350rpx;
+			height: 350rpx;
+		}
+	}
+
+	.product-swiper-item {
+		width: 288rpx;
+		// height: 268rpx;
+
+		.image {
+			width: 288rpx;
+			height: 288rpx;
+		}
+	}
+
+	.sxzg-icon {
+		color: $primary-color;
+		font-size: 16rpx;
+		width: 80rpx;
+		text-align: center;
+		line-height: normal;
+		border: 2rpx solid $primary-color;
+		border-radius: 20rpx;
+		display: inline-block;
+		position: relative;
+		top: -4rpx;
+		// transform: scale(0.9);
+	}
+
+	.title {
+		font-size: 24rpx;
+		display: inline-block;
+		white-space:normal;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		overflow: hidden;
+
+	}
+
+	.row {
+		padding: 0 10upx;
+	}
+
+	.row-2 {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.org-price,
+	.sales {
+		font-size: 22rpx;
+		color: #cccccc;
+	}
+	.org-price{
+		text-decoration: line-through;
+	}
+	.sxj-icon {
+		background: $primary-color;
+		color: white;
+		font-size: 20upx;
+		padding: 0 5upx;
+		border-radius: 5upx;
+		vertical-align: middle;
+	}
+
+	.price {
+		font-size: 24rpx;
+		color: $primary-color;
+		font-weight: bold;
+	}
+</style>

pages.json

@@ -3,7 +3,9 @@
 		{
 			"path": "pages/home/home",
 			"style": {
-				"navigationStyle": "custom"
+				"navigationStyle": "custom",
+				"backgroundColorTop":"#ff5d5b",
+				"backgroundColorBottom":"#eeeeee"
 			}
 		}
 	    ,{

pages/home/home.vue

@@ -1,60 +1,180 @@
 <template>
-	<view>
-		<uni-nav-bar left-icon="back" left-text="返回" right-text="菜单" title="导航栏组件" statusBar="true" fixed></uni-nav-bar>
-
-		<view class="content">
-			<image class="logo" src="/static/logo.png"></image>
-			<view class="text-area">
-				<text class="title">{{title}}</text>
+	<view style="background-color: #f7f7f5;">
+		<uni-nav-bar right-icon="chat" title=" " statusBar="true" :border="false" backgroundColor="#ff5d5b" btnWidth="60rpx"
+		 fixed>
+			<view class="search">
+				<view>
+					<uni-icons type="search" size="24" style="vertical-align:middle;" color="#999999"></uni-icons>
+					<text>粘贴宝贝标题</text>
+				</view>
+			</view>
+		</uni-nav-bar>
+		<view class="top-bg"></view>
+		<view class="section carousel-wrapper">
+			<swiper class="carousel" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
+				<swiper-item>
+					<view class="swiper-item">
+						<image class="image" src="../../static/images/material/carousel01.png" mode=""></image>
+					</view>
+				</swiper-item>
+				<swiper-item>
+					<view class="swiper-item">
+						<image class="image" src="../../static/images/material/carousel02.png" mode=""></image>
+					</view>
+				</swiper-item>
+			</swiper>
+		</view>
+		<view class="section">
+			<view class="col-title">
+				<image class="icon" style="width: 38rpx;height: 43rpx;" src="../../static/images/hot.png" mode="scaleToFill"></image>
+				<text>今日拿货榜单</text>
+			</view>
+			<view class="hot-rank">
+				<scroll-view scroll-x="true" :show-scrollbar="false" :enable-flex="true" style="white-space: nowrap;">
+					<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
+					<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
+					<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
+					<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
+				</scroll-view>
+			</view>
+		</view>
+		<view class="section">
+			<view class="col-title">
+				<image class="icon" style="width: 47rpx;height: 47rpx;" src="../../static/images/sale.png" mode="scaleToFill"></image>
+				<text>最新上线</text>
+			</view>
+			<view class="new-rank">
+					<scroll-view scroll-x="true" :show-scrollbar="false" :enable-flex="true" style="white-space: nowrap;">
+						<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
+						<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
+						<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
+						<product-item type="swiper" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
+					</scroll-view>
+				</view>
+			
+		</view>
+		<view class="section" style="margin-top: 40upx;">
+			<view class="col-img-title">
+				<image src="../../static/images/like.png" mode="scaleToFill" style="height: 28rpx;width: 363rpx;"></image>
+			</view>
+			<view class="like">
+				<product-item type="list" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
+				<product-item type="list" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
+				<product-item type="list" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
+				<product-item type="list" image="https://img.alicdn.com/imgextra/i3/2930255252/O1CN0159ouF21ofSiQ3kPq2_!!2930255252.jpg"></product-item>
 			</view>
 		</view>
-
 	</view>
 </template>
 
 <script>
-	import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
-
 	export default {
 		data() {
 			return {
-				title: 'Hello'
+				title: 'Hello',
 			}
 		},
-		components:{uniNavBar},
+		components: {},
 		onLoad() {
 
 		},
-		methods: {
+		methods: {}
+	}
+</script>
+
+<style lang="scss">
+	.search {
+		background-color: #FFFFFF;
+		width: 100%;
+		height: 60rpx;
+		line-height: 60rpx;
+		border-radius: 30rpx;
+		text-align: center;
+		color: #999999;
+	}
+
+	.top-bg {
+		position: absolute;
+		top: 0;
+		width: 100%;
+		height: 400rpx;
+		background-color: $primary-color;
+		overflow: hidden;
+	}
 
+	.top-bg::after {
+		background: #f7f7f7;
+		position: absolute;
+		border-radius: 2000rpx;
+		content: "";
+		width: 4000rpx;
+		height: 4000rpx;
+		top: 360rpx;
+		left: -1625rpx;
+	}
+
+	.carousel-wrapper {
+		// margin-top: 20rpx;
+
+		.carousel {
+			margin: auto;
+			overflow: hidden;
+			border-radius: 20rpx;
+			transform: translateY(0);
+			width: 702rpx;
+			height: 340rpx;
+
+			.image {
+				width: 702rpx;
+				height: 340rpx;
+			}
 		}
 	}
-</script>
 
-<style>
-	.content {
+	.section {
+		// padding: 20rpx;
+	}
+
+	.col-title {
+		height: 60rpx;
+		line-height: 60rpx;
+		font-weight: bold;
 		display: flex;
-		flex-direction: column;
 		align-items: center;
-		justify-content: center;
+		padding: 20upx 20upx 10upx 20upx;
+
+		.icon {
+			// vertical-align: middle;
+			margin-right: 12rpx;
+		}
 	}
 
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
+	.col-img-title {
+		text-align: center;
+		background: white;
+		height: 80upx;
+		line-height: 80upx;
 	}
 
-	.text-area {
-		display: flex;
-		justify-content: center;
+	.hot-rank .product-item ,.new-rank .product-item{
+		margin: 5rpx;
+
+		&:first-child {
+			margin-left: 20upx;
+		}
+
+		&:last-child {
+			margin-right: 20upx;
+		}
 	}
 
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
+	.like{
+		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		padding: 10upx 20upx;
+	}
+	.like .product-item{
+		margin-bottom: 10upx;
 	}
 </style>

ssly.scss

@@ -0,0 +1,3 @@
+.flex{
+	display: flex;
+}

uni.scss

@@ -13,6 +13,7 @@
  */
 
 /* 颜色变量 */
+$primary-color:#ff5d5b;
 
 /* 行为相关颜色 */
 $uni-color-primary: #007aff;
@@ -73,4 +74,6 @@ $uni-font-size-title:40rpx;
 $uni-color-subtitle: #555555; // 二级标题颜色
 $uni-font-size-subtitle:36rpx;
 $uni-color-paragraph: #3F536E; // 文章段落颜色
-$uni-font-size-paragraph:30rpx;
+$uni-font-size-paragraph:30rpx;
+
+@import "ssly.scss"

uni_modules/uni-icons/changelog.md

@@ -0,0 +1,2 @@
+## 1.1.4（2021-02-05）
+- 调整为uni_modules目录规范

uni_modules/uni-icons/components/uni-icons/icons.js

@@ -0,0 +1,132 @@
+export default {
+	"pulldown": "\ue588",
+	"refreshempty": "\ue461",
+	"back": "\ue471",
+	"forward": "\ue470",
+	"more": "\ue507",
+	"more-filled": "\ue537",
+	"scan": "\ue612",
+	"qq": "\ue264",
+	"weibo": "\ue260",
+	"weixin": "\ue261",
+	"pengyouquan": "\ue262",
+	"loop": "\ue565",
+	"refresh": "\ue407",
+	"refresh-filled": "\ue437",
+	"arrowthindown": "\ue585",
+	"arrowthinleft": "\ue586",
+	"arrowthinright": "\ue587",
+	"arrowthinup": "\ue584",
+	"undo-filled": "\ue7d6",
+	"undo": "\ue406",
+	"redo": "\ue405",
+	"redo-filled": "\ue7d9",
+	"bars": "\ue563",
+	"chatboxes": "\ue203",
+	"camera": "\ue301",
+	"chatboxes-filled": "\ue233",
+	"camera-filled": "\ue7ef",
+	"cart-filled": "\ue7f4",
+	"cart": "\ue7f5",
+	"checkbox-filled": "\ue442",
+	"checkbox": "\ue7fa",
+	"arrowleft": "\ue582",
+	"arrowdown": "\ue581",
+	"arrowright": "\ue583",
+	"smallcircle-filled": "\ue801",
+	"arrowup": "\ue580",
+	"circle": "\ue411",
+	"eye-filled": "\ue568",
+	"eye-slash-filled": "\ue822",
+	"eye-slash": "\ue823",
+	"eye": "\ue824",
+	"flag-filled": "\ue825",
+	"flag": "\ue508",
+	"gear-filled": "\ue532",
+	"reload": "\ue462",
+	"gear": "\ue502",
+	"hand-thumbsdown-filled": "\ue83b",
+	"hand-thumbsdown": "\ue83c",
+	"hand-thumbsup-filled": "\ue83d",
+	"heart-filled": "\ue83e",
+	"hand-thumbsup": "\ue83f",
+	"heart": "\ue840",
+	"home": "\ue500",
+	"info": "\ue504",
+	"home-filled": "\ue530",
+	"info-filled": "\ue534",
+	"circle-filled": "\ue441",
+	"chat-filled": "\ue847",
+	"chat": "\ue263",
+	"mail-open-filled": "\ue84d",
+	"email-filled": "\ue231",
+	"mail-open": "\ue84e",
+	"email": "\ue201",
+	"checkmarkempty": "\ue472",
+	"list": "\ue562",
+	"locked-filled": "\ue856",
+	"locked": "\ue506",
+	"map-filled": "\ue85c",
+	"map-pin": "\ue85e",
+	"map-pin-ellipse": "\ue864",
+	"map": "\ue364",
+	"minus-filled": "\ue440",
+	"mic-filled": "\ue332",
+	"minus": "\ue410",
+	"micoff": "\ue360",
+	"mic": "\ue302",
+	"clear": "\ue434",
+	"smallcircle": "\ue868",
+	"close": "\ue404",
+	"closeempty": "\ue460",
+	"paperclip": "\ue567",
+	"paperplane": "\ue503",
+	"paperplane-filled": "\ue86e",
+	"person-filled": "\ue131",
+	"contact-filled": "\ue130",
+	"person": "\ue101",
+	"contact": "\ue100",
+	"images-filled": "\ue87a",
+	"phone": "\ue200",
+	"images": "\ue87b",
+	"image": "\ue363",
+	"image-filled": "\ue877",
+	"location-filled": "\ue333",
+	"location": "\ue303",
+	"plus-filled": "\ue439",
+	"plus": "\ue409",
+	"plusempty": "\ue468",
+	"help-filled": "\ue535",
+	"help": "\ue505",
+	"navigate-filled": "\ue884",
+	"navigate": "\ue501",
+	"mic-slash-filled": "\ue892",
+	"search": "\ue466",
+	"settings": "\ue560",
+	"sound": "\ue590",
+	"sound-filled": "\ue8a1",
+	"spinner-cycle": "\ue465",
+	"download-filled": "\ue8a4",
+	"personadd-filled": "\ue132",
+	"videocam-filled": "\ue8af",
+	"personadd": "\ue102",
+	"upload": "\ue402",
+	"upload-filled": "\ue8b1",
+	"starhalf": "\ue463",
+	"star-filled": "\ue438",
+	"star": "\ue408",
+	"trash": "\ue401",
+	"phone-filled": "\ue230",
+	"compose": "\ue400",
+	"videocam": "\ue300",
+	"trash-filled": "\ue8dc",
+	"download": "\ue403",
+	"chatbubble-filled": "\ue232",
+	"chatbubble": "\ue202",
+	"cloud-download": "\ue8e4",
+	"cloud-upload-filled": "\ue8e5",
+	"cloud-upload": "\ue8e6",
+	"cloud-download-filled": "\ue8e9",
+	"headphones":"\ue8bf",
+	"shop":"\ue609"
+}

uni_modules/uni-icons/package.json

@@ -0,0 +1,81 @@
+{
+  "id": "uni-icons",
+  "displayName": "Icons 图标",
+  "version": "1.1.4",
+  "description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。",
+  "keywords": [
+    "icon",
+    "图标",
+    "uni-icons"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}

uni_modules/uni-icons/readme.md

@@ -0,0 +1,43 @@
+
+
+## Icons 图标
+> 代码块： `uIcons`
+
+
+用于展示 icons 图标 。
+
+### 安装方式
+
+本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
+
+如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
+
+### 基本用法
+
+在 ``template`` 中使用组件
+
+```html
+<uni-icons type="contact" size="30"></uni-icons>
+```
+
+## 图标示例
+
+点击复制图标类型
+<icons-layouts></icons-layouts>
+
+## API
+
+### Icons Props
+
+|属性名	|类型		|默认值	|说明				|
+|:-:	|:-:		|:-:	|:-:				|
+|size	|Number		|24		|图标大小			|
+|type	|String		|-		|图标图案，参考示例	|
+|color	|String		|-		|图标颜色			|
+
+
+### Icons Events
+|事件名	|说明			|返回值|
+|:-:	|:-:			|:-:  |
+|@click|点击 Icon 触发事件|-    |
+

uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue

@@ -4,9 +4,9 @@
 		 class="uni-navbar__content">
 			<status-bar v-if="statusBar" />
 			<view :style="{ color: color,backgroundColor: backgroundColor }" class="uni-navbar__header uni-navbar__content_view">
-				<view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left uni-navbar__content_view">
+				<view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left uni-navbar__content_view" :style="{'width':btnWidth}">
 					<view class="uni-navbar__content_view" v-if="leftIcon.length">
-						<uni-icons :color="color" :type="leftIcon" size="24" />
+						<uni-icons :color="color" :type="leftIcon" size="28" />
 					</view>
 					<view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length }" class="uni-navbar-btn-text uni-navbar__content_view"
 					 v-if="leftText.length">
@@ -21,9 +21,9 @@
 					<!-- 标题插槽 -->
 					<slot />
 				</view>
-				<view :class="title.length ? 'uni-navbar__header-btns-right' : ''" @tap="onClickRight" class="uni-navbar__header-btns uni-navbar__content_view">
+				<view :class="title.length ? 'uni-navbar__header-btns-right' : ''" @tap="onClickRight" class="uni-navbar__header-btns uni-navbar__content_view" :style="{'width':btnWidth}">
 					<view class="uni-navbar__content_view" v-if="rightIcon.length">
-						<uni-icons :color="color" :type="rightIcon" size="24" />
+						<uni-icons :color="color" :type="rightIcon" size="28" />
 					</view>
 					<!-- 优先显示图标 -->
 					<view class="uni-navbar-btn-text uni-navbar__content_view" v-if="rightText.length && !rightIcon.length">
@@ -87,17 +87,21 @@
 				type: String,
 				default: ""
 			},
+			btnWidth: {
+				type: String,
+				default: ""
+			},
 			fixed: {
 				type: [Boolean, String],
 				default: false
 			},
 			color: {
 				type: String,
-				default: "#000000"
+				default: "#FFFFFF"
 			},
 			backgroundColor: {
 				type: String,
-				default: "#FFFFFF"
+				default: "#ff5d5b"
 			},
 			statusBar: {
 				type: [Boolean, String],
@@ -151,7 +155,7 @@
 		position: relative;
 		background-color: $uni-bg-color;
 		overflow: hidden;
-		// width: 750rpx;
+		width: 750rpx;
 	}
 
 	.uni-navbar__content_view {