feat: 训练归属界面

CHANGELOG.md

@@ -58,6 +58,7 @@
  - | 添加药物使用记录界面 | [425cb63](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/425cb63)
  - | 添加设置界面 | [7ca0c59](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/7ca0c59)
  - | 添加项目排序 | [a0b491b](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/a0b491b)
+ - | 添加首页弹出按钮及界面 | [edd56cd](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/edd56cd)
  - | 点击日历日期查询项目列表 | [c458385](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/c458385)
  - | 登录提示是否合并账号 | [6a9b054](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/6a9b054)
  - | 登录时提示是否合并账号样式修改 | [d82bf1a](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/d82bf1a)

src/common/styles/tailwind.scss

@@ -14,16 +14,16 @@
   position: sticky;
 }
 
-.top-0{
+.top-0 {
   top: 0px;
 }
-.right-0{
+.right-0 {
   right: 0px;
 }
-.bottom-0{
+.bottom-0 {
   bottom: 0px;
 }
-.left-0{
+.left-0 {
   left: 0px;
 }
 
@@ -2209,6 +2209,14 @@
   margin-left: -1px;
 }
 
+.border-t {
+  border-top: 1px solid #f8f8f8;
+}
+
+.border-b {
+  border-bottom: 1px solid #f8f8f8;
+}
+
 .box-border {
   box-sizing: border-box;
 }
@@ -4352,6 +4360,9 @@
 .h-full {
   height: 100%;
 }
+.h-screen {
+  height: 100vh;
+}
 .w-4 {
   width: 1rem !important;
 }
@@ -4494,8 +4505,14 @@
 .border-4 {
   border-width: 4px;
 }
+.rounded-2xl {
+  border-radius: 1rem;
+}
+.rounded-3xl {
+  border-radius: 1.5rem;
+}
 .rounded-full {
-  border-radius: 9999px;
+  border-radius: 50%;
 }
 
 .shadow-sm {

src/components/ConfigInfo/components/Caregiver.vue

@@ -8,7 +8,7 @@
           :head-style="headStyle"
           :body-style="bodyStyle"
           :accordion="false"
-          style="border-bottom: 1px solid #f8f8f8"
+          class="border-b"
         >
           <u-collapse-item :title="colItem.name" :open="false">
             <!-- 单选 -->
@@ -27,7 +27,7 @@
             </view>
           </u-collapse-item>
         </u-collapse>
-        <view v-else :key="itemIndex" class="flex justify-between items-center text-sm" style="border-bottom: 1px solid #f8f8f8">
+        <view v-else :key="itemIndex" class="flex justify-between items-center text-sm border-b">
           <view class="ml-4 my-3">{{ colItem.name }}</view>
           <!-- 数字输入框 -->
           <view v-if="colItem.type === 3" class="pr-7">

src/components/ConfigInfo/components/Family.vue

@@ -1,7 +1,7 @@
 <template>
   <view style="border: 1px solid #e5e5e5">
     <view class="flex flex-col text-sm" v-for="(family, index) in familyInfo" :key="index">
-      <view class="flex justify-between items-center p-3" style="border-bottom: 1px solid #f8f8f8">
+      <view class="flex justify-between items-center p-3 border-b">
         <text>{{ family.name }}</text>
         <u-avatar :src="family.avatar" v-if="family.name === '微信头像'" mode="square"></u-avatar>
         <text v-else class="text-gray-400">{{ family.value }}</text>

src/components/ConfigInfo/components/Info copy.vue

@@ -322,11 +322,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-.border-b {
-  border-bottom: 1px solid #f8f8f8;
-}
-</style>
 
 <style>
 .radio-style >>> .uni-radio-input {

src/components/ConfigInfo/components/Info.vue

@@ -306,11 +306,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-.border-b {
-  border-bottom: 1px solid #f8f8f8;
-}
-</style>
 
 <style>
 /* .radio-style >>> .uni-radio-input {

src/components/ConfigInfo/components/Medicine.vue

@@ -1,9 +1,9 @@
 <template>
   <view style="border: 1px solid #e5e5e5">
     <view v-for="(item, index) in medicineInfo" :key="index">
-      <view class="pl-4 py-3 font-bold" style="border-bottom: 1px solid #f8f8f8">{{ item.title }}</view>
+      <view class="pl-4 py-3 font-bold border-b">{{ item.title }}</view>
       <template v-for="(colItem, itemIndex) in item.date">
-        <view :key="itemIndex" class="flex justify-between items-center text-sm" style="border-bottom: 1px solid #f8f8f8">
+        <view :key="itemIndex" class="flex justify-between items-center text-sm border-b">
           <view class="ml-4 my-3">{{ colItem.name }}</view>
           <!-- 单选 -->
           <view v-if="colItem.type === 1">

src/components/EndLine/EndLine.vue

@@ -1,9 +1,13 @@
 <template>
-  <view class="w-full bg-gray-100 text-gray-200 text-center pt-4 pb-12">----------我也是有底线的----------</view>
+  <view class="w-full bg-gray text-gray-200 text-center pt-4 pb-12">----------我也是有底线的----------</view>
 </template>
 
 <script>
 export default {};
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.bg-gray {
+  background-color: $uni-bg-color-grey;
+}
+</style>

src/pages/add-info/add-info.vue

@@ -1,6 +1,6 @@
 <template>
   <view>
-    <Info />
+    <Info class="bg-white" />
     <EndLine />
   </view>
 </template>
@@ -10,4 +10,8 @@ import Info from 'components/ConfigInfo/components/Info';
 export default { components: { Info } };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+page {
+  background-color: $uni-bg-color-grey;
+}
+</style>

src/pages/ascription/ascription.vue

@@ -1,9 +1,87 @@
 <template>
-  <view>训练归属</view>
+  <view class="bg-white px-2">
+    <view v-for="(list, index) in lists" :key="index">
+      <view class="flex flex-col">
+        <text>{{ list.title }}</text>
+        <img :src="list.img" class="w-full" />
+        <text>训练结果</text>
+        <view class="flex flex-nowrap mt-3 rounded-3xl overflow-hidden">
+          <view v-for="i in lines" :key="i.value" class="flex-1" :class="i.value === 6 ? '' : 'box'">
+            <view class="w-full h-2" :class="i.checked ? 'bg-blue-500' : 'bg-gray-100'" @click="chooseLevel(i.value)"></view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <EndLine />
+  </view>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      lines: [
+        {
+          value: 1,
+          checked: true,
+        },
+        {
+          value: 2,
+          checked: false,
+        },
+        {
+          value: 3,
+          checked: false,
+        },
+        {
+          value: 4,
+          checked: false,
+        },
+        {
+          value: 5,
+          checked: false,
+        },
+        {
+          value: 6,
+          checked: false,
+        },
+      ],
+      lists: [
+        {
+          title: '迷宫',
+          img: 'https://www.tall.wiki/staticrec/guide/2.png',
+          trainer: ['张斌', '思南', '雪梅', '方圆', '张野', '马壮', '慧娟'],
+        },
+        {
+          title: '迷宫',
+          img: 'https://www.tall.wiki/staticrec/guide/2.png',
+          trainer: ['张斌', '思南', '雪梅', '方圆', '张野', '马壮', '慧娟'],
+        },
+      ],
+    };
+  },
+
+  methods: {
+    chooseLevel(index) {
+      this.lines.forEach((line, i) => {
+        console.log('i: ', i, index);
+        if (i < index) {
+          line.checked = true;
+        } else {
+          line.checked = false;
+        }
+      });
+    },
+  },
+};
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+page {
+  background-color: $uni-bg-color-grey;
+}
+
+.box {
+  margin-right: 2px;
+}
+</style>

src/pages/hold-all/hold-all.vue

@@ -1,9 +1,55 @@
 <template>
-  <view>工具箱</view>
+  <view class="bg-white flex flex-col px-2">
+    <view v-for="(item, index) in lists" :key="index">
+      <view class="flex justify-between items-center py-3 border-b">
+        <view>{{ item.title }}</view>
+        <view class="flex items-center text-gray-400">
+          <text class="mr-2">{{ item.name || '绑定' }}</text>
+          <u-icon name="wifi" :color="item.bound ? '#1890FF' : '#999999'" size="36"></u-icon>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      lists: [
+        {
+          title: '工具箱1',
+          name: 'ccsens_5G',
+          bound: true,
+        },
+        {
+          title: '工具箱2',
+          name: 'ccsens_5G',
+          bound: true,
+        },
+        {
+          title: '工具箱3',
+          name: 'ccsens_5G',
+          bound: true,
+        },
+        {
+          title: '工具箱4',
+          name: '',
+          bound: false,
+        },
+        {
+          title: '工具箱5',
+          name: '',
+          bound: false,
+        },
+      ],
+    };
+  },
+};
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+page {
+  background-color: $uni-bg-color-grey;
+}
+</style>