1.我的 2.main.scss颜色

pages/index/components/home.vue

@@ -58,7 +58,7 @@ export default {
 	name: 'Home',
 	data() {
 		return {
-			coad: false,
+			coad: true,
 		}
 	}
 };

pages/index/components/mine.vue

@@ -1,9 +1,68 @@
 <template>
-  <div>user1</div>
+	<view>
+		<!-- 头部 -->
+		<view class="cu-card flex bg-white">
+			<view class="flex flex-sub align-center padding-xl">
+				<view class="round xl cu-avatar portrait">
+					<image class="xl cu-avatar" :src="userInfo.avatarUrl"></image>
+				</view>
+				<view class="flex-sub padding-left">
+					<view class="text-xl">{{ userInfo.nickName }}</view>
+					<view class="text-df padding-top-xs description">{{ userInfo.classes }}</view>
+				</view>
+				<view :style="{'color':userInfo.healthyCodeColor}" class="iconfont icon-qrcode healthy-coad"></view>
+			</view>
+		</view>
+		<!-- 列表 -->
+		<view class="bg-white margin-top">
+			<view class="cu-list menu margin-lr">
+			  <view class="cu-item">
+				<view class="text-lg">个人信息</view>
+				<view class="iconfont icon-right more"></view>
+			  </view>
+			  <view class="cu-item">
+				<view class="text-lg">我的健康打卡</view>
+				<view class="iconfont icon-right more"></view>
+			  </view>
+			  <view class="cu-item">
+				<view class="text-lg">我的行程</view>
+				<view class="iconfont icon-right more"></view>
+			  </view>
+			  <view class="cu-item">
+				<view class="text-lg">我的校园打卡</view>
+				<view class="iconfont icon-right more"></view>
+			  </view>
+			</view>
+		</view>
+	</view>
+  
 </template>
 
 <script>
 export default {
   name: 'Mine',
+  data() {
+    return {
+      userInfo: {
+        avatarUrl: '../../../static/head-portrait.jpg',
+        nickName: '丁菲菲',
+        classes: '计算机19级软工二班',
+		healthyCodeColor: '#11A20D'
+      },
+    };
+  },
 };
 </script>
+
+<style lang="scss" scoped>
+	.portrait{
+		overflow: hidden;
+	}
+	.healthy-coad{
+		font-size: 40px;
+	}
+	.more{
+		font-size: 18px;
+		color: $grey;
+	}
+</style>

uni.scss

@@ -1,11 +1,11 @@
 /* 颜色变量 */
 /* Color 可以自定义相关配色 */
 /* 标准色 */
-$red: #FF0000;
+$red: #e54d42;
 $orange: #f37b1d;
 $yellow: #fbbd08;
-$olive: #76AC96; // 健康打卡 绿
-$green: #11A20D;
+$olive: #76AC96;
+$green: #11A20D; // 健康打卡 绿
 $cyan: #0897C7; // 按钮蓝
 $blue: #0A97C6;
 $darkBlue: #0076FF;
@@ -13,7 +13,7 @@ $purple: #677DBF; // 校园打卡 青
 $mauve: #9c26b0;
 $pink: #e03997;
 $brown: #a5673f;
-$grey: #BFBFBF;
+$grey: #CDCDCD;
 $black: #333333;
 $darkGray: #666666;
 $gray: #101010;
@@ -32,7 +32,7 @@ $purpleLight: #e1d7f0;
 $mauveLight: #ebd4ef;
 $pinkLight: #f9d7ea;
 $brownLight: #ede1d9;
-$greyLight: #F8F8F8;
+$greyLight: #F5f5f5;
 
 /* 渐变色 */
 $gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
@@ -90,9 +90,14 @@ $uni-border-color: #c8c7cc;
 /* 尺寸变量 */
 
 /* 文字尺寸 */
+$uni-font-size: 20rpx;
 $uni-font-size-sm: 24rpx;
 $uni-font-size-base: 28rpx;
 $uni-font-size-lg: 32rpx;
+$uni-font-size-xl: 36rpx;
+$uni-font-size-xxl: 44rpx;
+$uni-font-size-sl: 80rpx;
+$uni-font-size-xsl: 120rpx;
 
 /* 图片尺寸 */
 $uni-img-size-sm: 40rpx;