添加图标、颜色

App.vue

@@ -17,4 +17,5 @@ export default {
 @import 'colorui/icon.scss';
 @import 'colorui/animation.scss';
 @import 'common/style/global';
+@import 'common/style/iconfont';
 </style>

common/style/iconfont.css

@@ -0,0 +1,60 @@
+@font-face {font-family: "iconfont";
+  src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-erweima:before {
+	font-size: 24px;
+  content: "\e7ac";
+}
+
+.icon-tongji:before {
+	font-size: 24px;
+  content: "\e6c8";
+}
+
+.icon-bushuline:before {
+	font-size: 24px;
+  content: "\e6c2";
+}
+
+.icon-daka:before {
+	font-size: 24px;
+  content: "\e629";
+}
+
+.icon-calendar:before {
+  content: "\e7d3";
+}
+
+.icon-scan:before {
+  content: "\e7d4";
+}
+
+.icon-qrcode:before {
+  content: "\e7dd";
+}
+
+.icon-check-circle-fill:before {
+  content: "\e844";
+}
+
+.icon-mine1:before {
+  content: "\e60b";
+}
+
+.icon-Home:before {
+  content: "\e64e";
+}
+
+.icon-temperature:before {
+  content: "\e71d";
+}
+

pages/index/components/home.vue

@@ -1,9 +1,84 @@
 <template>
-  <div>home</div>
+	<view class="content">
+		<image src="../../../static/bg.png" style="width: 100%;"></image>
+		<view class="box">
+			<view class="cu-card flex margin bg-white shadow card-radius">
+				<view class="flex align-center padding">
+					<view class="round lg cu-avatar icon1">
+						<view class="iconfont icon-erweima"></view>
+					</view>
+					<view class="padding-left-sm flex-sub">
+						<view class="text-xl">领取健康码</view>
+						<view class="text-df padding-top-xs description">介绍文本</view>
+					</view>
+				</view>
+			</view>
+			<view class="cu-card flex margin bg-white shadow card-radius">
+				<view class="flex align-center padding">
+					<view class="round lg cu-avatar icon2">
+						<view class="iconfont icon-daka"></view>
+					</view>
+					<view class="padding-left-sm flex-sub">
+						<view class="text-xl">每日健康打卡</view>
+						<view class="text-df padding-top-xs description">每日健康打卡介绍文本</view>
+					</view>
+				</view>
+			</view>
+			<view class="cu-card flex margin bg-white shadow card-radius">
+				<view class="flex align-center padding">
+					<view class="round lg cu-avatar icon3">
+						<view class="iconfont icon-bushuline"></view>
+					</view>
+					<view class="padding-left-sm flex-sub">
+						<view class="text-xl">行程上报</view>
+						<view class="text-df padding-top-xs description">行程上报介绍文本</view>
+					</view>
+				</view>
+			</view>
+			<view class="cu-card flex margin bg-white shadow card-radius">
+				<view class="flex align-center padding">
+					<view class="round lg cu-avatar icon4">
+						<view class="iconfont icon-tongji"></view>
+					</view>
+					<view class="padding-left-sm flex-sub">
+						<view class="text-xl">统计</view>
+						<view class="text-df padding-top-xs description">统计介绍文本</view>
+					</view>
+				</view>
+			</view>
+		
+		</view>
+	</view>
 </template>
 
 <script>
 export default {
   name: 'Home',
+  
 };
 </script>
+
+<style scoped lang="scss">
+.box {
+	position: relative;
+	top: -110rpx;
+}
+.card-radius{
+	border-radius: 15rpx;
+}
+.description{
+	color: $grey;
+}
+.icon1{
+	background: $iconGreen;
+}
+.icon2{
+	background: $iconCyan;
+}
+.icon3{
+	background: $iconBlue;
+}
+.icon4{
+	background: $iconPurple;
+}
+</style>

pages/index/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="container">
-    <view class="content">
+    <view class="content" style="width: 100%;">
       <home v-if="navIndex === 0" />
       <mine v-else />
     </view>

uni.scss

@@ -1,21 +1,22 @@
 /* 颜色变量 */
 /* Color 可以自定义相关配色 */
 /* 标准色 */
-$red: #e54d42;
+$red: #FF0000;
 $orange: #f37b1d;
 $yellow: #fbbd08;
-$olive: #8dc63f;
-$green: #39b54a;
-$cyan: #1cbbb4;
-$blue: #0081ff;
-$purple: #6739b6;
+$olive: #76AC96; // 健康打卡 绿
+$green: #11A20D;
+$cyan: #0897C7; // 按钮蓝
+$blue: #0A97C6;
+$darkBlue: #0076FF;
+$purple: #677DBF; // 校园打卡 青
 $mauve: #9c26b0;
 $pink: #e03997;
 $brown: #a5673f;
-$grey: #8799a3;
+$grey: #BFBFBF;
 $black: #333333;
 $darkGray: #666666;
-$gray: #583939;
+$gray: #101010;
 $ghostWhite: #f1f1f1;
 $white: #ffffff;
 
@@ -31,13 +32,13 @@ $purpleLight: #e1d7f0;
 $mauveLight: #ebd4ef;
 $pinkLight: #f9d7ea;
 $brownLight: #ede1d9;
-$greyLight: #e7ebed;
+$greyLight: #F8F8F8;
 
 /* 渐变色 */
 $gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
 $gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
 $gradualGreen: linear-gradient(45deg, #39b54a, #8dc63f);
-$gradualPurple: linear-gradient(45deg, #9000ff, #5e00ff);
+$gradualPurple: linear-gradient(45deg, #ec008c, #5e00ff);
 $gradualPink: linear-gradient(45deg, #ec008c, #6739b6);
 $gradualBlue: linear-gradient(45deg, #0081ff, #1cbbb4);
 
@@ -64,10 +65,16 @@ $uni-color-success: #4cd964;
 $uni-color-warning: #f0ad4e;
 $uni-color-error: #dd524d;
 
+/* 首页四个配色 */
+$iconGreen: #62D4A6;
+$iconCyan: #9376F5;
+$iconBlue: #58C9D1;
+$iconPurple: #CF7FE6;
+
 /* 文字基本颜色 */
-$uni-text-color: #333; //基本色
+$uni-text-color: #101010; //基本色
 $uni-text-color-inverse: #fff; //反色
-$uni-text-color-grey: #999; //辅助灰色，如加载更多的提示信息
+$uni-text-color-grey: #747474; //辅助灰色，如加载更多的提示信息
 $uni-text-color-placeholder: #808080;
 $uni-text-color-disable: #c0c0c0;