| src/assets/images/header-active.png | patch | view | raw | blame | history | |
| src/assets/images/header-left.png | patch | view | raw | blame | history | |
| src/assets/images/header-right.png | patch | view | raw | blame | history | |
| src/page/Home/Home.vue | ●●●●● patch | view | raw | blame | history | |
| src/page/Home/components/Header.vue | ●●●●● patch | view | raw | blame | history | |
| src/page/Home/components/HomeLeft/Index.vue | ●●●●● patch | view | raw | blame | history | |
| src/page/Home/components/HomeRight/Index.vue | ●●●●● patch | view | raw | blame | history |
src/assets/images/header-active.png
src/assets/images/header-left.png
src/assets/images/header-right.png
src/page/Home/Home.vue
New file @@ -0,0 +1,52 @@ <template> <div class="page-home"> <Header></Header> <div class="warp"> <HomeLeft></HomeLeft> <!-- <div>中间搜索</div> --> <HomeRight></HomeRight> </div> </div> </template> <script> import index from '@/mixins'; import { mapGetters } from 'vuex'; import Header from '../Home/components/Header.vue'; import HomeLeft from '../Home/components/HomeLeft/Index.vue' import HomeRight from '../Home/components/HomeRight/Index.vue' export default { mixins: [index], components: { Header, HomeLeft, HomeRight, }, name: 'index', provide() { return { index: this, }; }, computed: {}, props: [], methods: { }, }; </script> <style scoped lang="scss"> .page-home { height: 100vh; width: 100%; background-image: url('../../assets/images/bg.png'); background-size: 100% 100%; background-repeat: no-repeat; font-family: YouSheBiaoTiHei, YouSheBiaoTiHei; .warp { display: flex; justify-content: space-between; } } </style> src/page/Home/components/Header.vue
New file @@ -0,0 +1,74 @@ <template> <div class="header"> <div class="h-left"> <div class="left-item active">首页</div> <div class="left-item">集群调度</div> <div class="left-item">任务管理</div> <div class="left-item">航线规划</div> </div> <div class="h-right"> <div class="right-item">AI识别分析</div> <div class="right-item">综合分析</div> <div class="right-item">数据中心</div> <div class="right-item">系统运维</div> </div> </div> </template> <script> </script> <style scoped lang="scss"> .header { width: calc(100% - 57px - 59px); margin-left: 57px; padding-top: 38px; display: flex; justify-content: space-between; .h-left { display: flex; justify-content: space-between; align-items: center; .left-item { width: 105px; height: 39px; background: url(@/assets/images/header-left.png) no-repeat; background-size: 100% 100%; margin-right: 3px; font-family: YouSheBiaoTiHei, YouSheBiaoTiHei; font-weight: 400; font-size: 18px; color: #FFFFFF; line-height: 34px; text-align: center; font-style: normal; text-transform: none; } .active { background: url(@/assets/images/header-active.png) no-repeat; background-size: 100% 100%; } } .h-right { display: flex; justify-content: space-between; align-items: center; .right-item { width: 105px; height: 39px; background: url(@/assets/images/header-right.png) no-repeat; background-size: 100% 100%; margin-right: 3px; font-family: YouSheBiaoTiHei, YouSheBiaoTiHei; font-weight: 400; font-size: 18px; color: #FFFFFF; line-height: 34px; text-align: center; font-style: normal; text-transform: none; } } } </style> src/page/Home/components/HomeLeft/Index.vue
New file @@ -0,0 +1,35 @@ <template> <div class="home-left-index"> <!--时间 天气--> <div class="time-watch"> <div class="time">2025.03.04 15:30:00</div> <div> <img src="" alt=""> <span>阴天</span> <span>适合飞行</span> </div> </div> </div> </template> <script></script> <style scoped lang="scss"> .home-left-index { margin-top: 12px; margin-left: 45px; // border: 1px springgreen solid; width: 360px; .time-watch { font-size: 14px; height: height(36); display: flex; .time { font-weight: 400; font-size: 14px; line-height: height(16); } } } </style> src/page/Home/components/HomeRight/Index.vue
New file @@ -0,0 +1,16 @@ <template> <div class="home-right-index"> <div class=""> 哒哒哒 </div> </div> </template> <script></script> <style scoped lang="scss"> .home-right-index { margin-top: 12px; margin-right: 58px; } </style>