feat: dev index layout

pages/index/index.js

@@ -5,7 +5,39 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    locationStr: '定位地址…',
+    fileInfoList: [
+      {
+        id: '0',
+        name: '范一岚',
+        data: '2022/09/14'
+      },
+      {
+        id: '0',
+        name: '范一岚',
+        data: '2022/09/14'
+      },
+      {
+        id: '0',
+        name: '范一岚',
+        data: '2022/09/14'
+      },
+      {
+        id: '0',
+        name: '范一岚',
+        data: '2022/09/14'
+      },
+      {
+        id: '0',
+        name: '范一岚',
+        data: '2022/09/14'
+      },
+      {
+        id: '0',
+        name: '范一岚',
+        data: '2022/09/14'
+      }
+    ]
   },
 
   /**

pages/index/index.json

@@ -1,3 +1,7 @@
 {
-  "navigationBarTitleText": "首页"
+  "navigationBarTitleText": "首页",
+  "usingComponents": {
+    "van-button": "@vant/weapp/button/index",
+    "van-icon": "@vant/weapp/icon/index"
+  }
 }

pages/index/index.wxml

@@ -1,6 +1,62 @@
 <!--pages/index/index.wxml-->
 <view class="index-container">
-  <view class="top">top</view>
-  <view class="content">content</view>
-  <view class="footer">footer</view>
+  <view class="header">
+    <view class="main-header">
+      <view class="location">
+        <view class="location-info">
+          <van-icon name="location" size="20px"/>
+          <text class="l-text">{{locationStr}}</text>
+        </view>
+        <view class="scan">
+          <van-icon name="scan" size="20px"/>
+        </view>
+      </view>
+    </view>
+  </view>
+  <view class="buy-conten">
+    <view class="left default-tag"></view>
+    <view class="blance desc">
+      <view class="count">
+        <text class="desc-text">剩余：</text>
+        <text class="bolder-text">0</text>
+      </view>
+      <view class="desc-text b-text ittflex-jcs">次健康早筛服务权益</view>
+    </view>
+    <view class="btn default-btn buy-btn">立即购买</view>
+  </view>
+  <view class="file-info">
+    <view class="file-title">
+      <text class="title">档案信息</text>
+      <view class="nav-tap"> 
+        <text class="nav-title">全部</text>
+        <van-icon name="arrow" color="#999"/>
+      </view>
+    </view>
+    <view class="file-content">
+      <block wx:if="{{fileInfoList.length == 0}}">
+        <view class="no-data ittflex" >
+          <text class="none-data-text">暂无档案</text>
+        </view>
+      </block>
+      <block wx:else>
+        <view class="file-item" wx:for="{{fileInfoList}}" wx:key="index">
+          <view class="main-con {{index == fileInfoList.length - 1 ? 'no-border' : ''}}">
+            <view class="file-left user-info">
+              <view class="header-img"></view>
+              <view class="person">
+                <view class="p-info ittflex-jcs">
+                  <text class="name-text">{{item.name}}</text>
+                  <view class="sex-tag"></view>
+                </view>
+                <view class="p-date">{{item.data}}</view>
+              </view>
+              <view class="qrcode"></view>
+            </view>
+            <view class="file-right check-report">查看报告</view>
+          </view>
+        </view>
+      </block>
+    </view>
+    <view class="add-btn absolute-btn ittflex">添加检测人</view>
+  </view>
 </view>

pages/index/index.wxss

@@ -3,4 +3,192 @@
   width: 100%;
   height: 100%;
   background-color: #F7F7F7;
+}
+.header {
+  width: 100%;
+  height: 98rpx;
+  background-color: #fff;
+}
+.main-header {
+  width: 690rpx;
+  height: 100%;
+  margin: 0 auto;
+}
+.location {
+  width: 100%;
+  height: 90rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.l-text {
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #333333;
+  margin-left: 14rpx;
+}
+.buy-conten {
+  width: 690rpx;
+  height: 152rpx;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  margin: 22rpx auto 0;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.blance {
+  width: 374rpx;
+  height: 112rpx;
+  padding-left: 20rpx;
+}
+.count {
+  height: 56rpx;
+  align-items: stretch;
+}
+.default-tag {
+  width: 112rpx;
+  height: 112rpx;
+  background: #45A6B5;
+  border-radius: 20rpx;
+  opacity: 0.1;
+  margin-left: 20rpx;
+}
+.desc-text {
+  font-size: 26rpx;
+  height: 56rpx;
+  font-weight: 400;
+  color: #333333;
+}
+.bolder-text {
+  font-size: 48rpx;
+  font-weight: 600;
+  color: #333333;
+}
+.buy-btn {
+  width: 144rpx;
+  height: 60rpx;
+  background: #45A6B5;
+  border-radius: 10rpx;
+  color: #fff;
+  text-align: center;
+  line-height: 60rpx;
+  font-size: 26rpx;
+  font-weight: 400;
+}
+.file-info {
+  width: 690rpx;
+  min-height: 254rpx;
+  height: auto;
+  margin: 20rpx auto 0;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  position: relative;
+}
+.file-title {
+  width: 100%;
+  height: 66rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.title {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #333333;
+  margin-left: 20rpx;
+}
+.nav-tap {
+  margin-right: 28rpx;
+}
+.nav-title {
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #999999;
+  margin-right: 10rpx;
+}
+.file-content {
+  width: 100%;
+  min-height: 160rpx;
+  max-height: 480rpx;
+  overflow-y: scroll;
+}
+.file-left {
+  width: max-content;
+  height: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.header-img {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  background-color: #f66;
+}
+.person {
+  margin: 0 30rpx 0 14rpx;
+}
+.person .p-info .sex-tag{
+  width: 30rpx;
+  height: 30rpx;
+}
+.name-text{
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #333333;
+}
+.p-date{
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #999999;
+}
+.qrcode {
+  width: 60rpx;
+  height: 60rpx;
+  background: #000000;
+}
+.no-data {
+  width: 100%;
+  height: 100%;
+}
+.none-data-text {
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #999999;
+}
+.file-item {
+  width: 100%;
+  height: 160rpx;
+}
+.main-con {
+  width: 648rpx;
+  height: 100%;
+  margin: 0 auto;
+  border-bottom: 1rpx solid #DDD;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.no-border {
+  border: 0;
+}
+.absolute-btn {
+  position: absolute;
+  bottom: -28rpx;
+  left: calc(50% - 95rpx);
+  width: 190rpx;
+  height: 60rpx;
+  background: linear-gradient(180deg, #7BD2DB 0%, #45A6B5 100%);
+  box-shadow: 0 4rpx 8rpx 0 rgba(69,166,181,0.3);
+  border-radius: 30rpx;
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #FFFFFF;
+}
+.check-report {
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #45A6B5;
+  padding: 10px 0;
 }