添加辅助加样首页

src/App.vue

@@ -1,51 +1,18 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from "vue-router";
-import HelloWorld from "./components/HelloWorld.vue";
+
 </script>
 
 <template>
-	<header>
-		<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-
-		<div class="wrapper">
-			<HelloWorld msg="You did it!" />
-
-			<h1 class="text-3xl font-bold underline">Hello world!</h1>
-
-			<nav>
-				<RouterLink to="/">Home</RouterLink>
-				<RouterLink to="/about">About</RouterLink>
-			</nav>
-		</div>
-	</header>
-
-	<RouterView />
+  <div>
+    <router-view></router-view>
+  </div>
 </template>
 
-<style scoped>
-header {
-	line-height: 1.5;
-	max-height: 100vh;
-	.logo {
-		display: block;
-		margin: 0 auto 2rem;
-	}
-	nav {
-		width: 100%;
-		font-size: 12px;
-		text-align: center;
-		margin-top: 2rem;
-		a {
-			display: inline-block;
-			padding: 0 1rem;
-			border-left: 1px solid var(--color-border);
-			&:first-of-type {
-				border: 0;
-			}
-			&.router-link-exact-active {
-				color: green;
-			}
-		}
-	}
+<style>
+html,
+body {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 </style>

src/router/index.ts

@@ -1,13 +1,13 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import Simple from '../views/Simple.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: HomeView,
+      name: 'simple',
+      component: Simple,
     },
     {
       path: '/about',

src/views/HomeView.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <main>
-    <div>Home Sub View</div>
-  </main>
-</template>

src/views/Simple.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="simple_home">
+    <aside class="sidebar">
+      <Header></Header>
+    </aside>
+    <main>
+      <div class="main">
+        <div v-for="(item, index) in simpleCardList" :key="index">
+          <SimpleCard :simpleInfo="item" :key="item.id"></SimpleCard>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+<script setup lang="ts">
+  import {ref} from 'vue'
+  import Header from './components/Header.vue'
+  import SimpleCard from './components/SimpleCard.vue'
+  
+  const simpleCardList = ref([{
+    id:1,
+    time:123,
+    state:1
+  },{
+    id:2,
+    time:123,
+    state:1
+  },{
+    id:3,
+    time:123,
+    state:1
+  },{
+    id:4,
+    time:123,
+    state:1
+  },{
+    id:5,
+    time:123,
+    state:1
+  },{
+    id:6,
+    time:123,
+    state:1
+  }])
+</script>
+<style scoped>
+.main{
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: 5px;
+  flex-direction: row;
+  padding-left: 5px;
+  margin-top:-5px;
+}
+.simple_home{
+  width: 320px;
+  height: 320px;
+  background: #ECF2FF;
+}
+.sidebar {
+  width: 100%;
+  height: 50px;
+  margin-right: 20px;
+}
+</style>

src/views/components/Header.vue

@@ -0,0 +1,70 @@
+<template>
+    <div class="header">
+        <div class="header_logo">
+            <img :src="logo"/>
+        </div>
+        <div class="header_menu">
+            <van-dropdown-menu class="header_menu_item" style="background-color:#e1f0fb">
+                <van-dropdown-item v-model="menuId" :options="menuList" />
+            </van-dropdown-menu>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+    import logo from '@/assets/logo.png'
+    import { ref } from 'vue';
+    const menus = [{
+        text: '菜单',
+        value: 0
+    },{
+        text: '测试页面',
+        value: 1
+    }]
+    const menuId = ref(0)
+    const menuList = ref(menus)
+
+</script>
+<style scoped>
+    .header{
+        width: 100%;
+        display: flex;
+        .header_logo{
+            width:100px;
+            height: 19px;
+            padding-top: 9px;
+            padding-left:15px;
+            img{
+                margin-top: 5px;
+            }
+        }
+        
+        .header_menu{
+            margin-left:125px;
+            width: 80px;
+            padding-top:5px;
+            color:#FFFFFF;
+            .header_menu_item{
+                color:#FFFFFF
+            }
+        }
+    }
+
+    :deep(.van-dropdown-menu__bar){
+        background-color: #1871F8;
+        border-radius: 5px;
+        height: 35px;
+
+        .van-ellipsis{
+            color:white;
+        }    
+        
+    }
+
+    :deep(.van-dropdown-item__content){
+        width: 150px;
+        margin-left: 170px;
+    }
+
+    
+    
+</style>

src/views/components/SimpleCard.vue

@@ -0,0 +1,89 @@
+<template>
+    <div class="simple_card">
+        <div class="simple_pos">
+            {{ simpleCard.id }}
+        </div>
+        <div class="simple_time">
+            <div class="simple_remaining_time">
+                <img :src="remainingTime"/>
+                <div>剩余时间</div>
+            </div>
+            <div class="simple_countdown">
+                12:00:00
+            </div>
+        </div>
+        <div class="simple_btn items-center">
+            <van-button type="danger" size="mini" style="width:90px">清除设定</van-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { ref } from 'vue'
+    import remainingTime from '@/assets/simpleCard/remaining_time.png'
+    const count = ref(1)
+    const props = defineProps({
+        simpleInfo:{
+            type:Object,
+            default:()=>{}
+        }
+    })
+
+    const simpleCard = ref(props.simpleInfo)
+</script>
+<style scoped>
+    .simple_card{
+        width: 100px;
+        height: 137px;
+        background: #FFFFFF;
+        border-radius: 8px;
+        opacity: 1;
+        .simple_pos{
+            text-align: center;
+            font-family: HarmonyOS Sans SC;
+            font-size: 22px;
+            font-weight: bold;
+            line-height: normal;
+            color: #1871F8;
+            
+        }
+
+        .simple_time{
+            width: 90px;
+            height: 70px;
+            border-radius: 6px;
+            opacity: 1;
+            background: #1871F8;
+            padding-top:2px;
+            margin-left: 5px;
+            .simple_remaining_time{
+                display: flex;
+                color: #FFFFFF;
+                text-align: center;
+                font-size: 12px;
+                font-weight: bold;
+                padding-top: 10px;
+                padding-left: 10px;
+            }
+
+            .simple_countdown{
+                width: 84px;
+                height: 32px;
+                border-radius: 6px;
+                opacity: 1;
+                background: #195DC4;
+                color: #FFFFFF;
+                padding-top: 5px;
+                text-align: center;
+                margin-left:3px;
+                margin-top:2px;
+            }
+        }
+
+        .simple_btn{
+            border-radius: 6px;
+            width: 90px;
+            margin-left:5px;
+        }
+    }
+</style>

src/views/components/index.ts

@@ -0,0 +1,2 @@
+import { default as SimpleCard } from './SimpleCard.vue'
+import { default as Header } from './Header.vue'