From 58f406ecca89ca7027392d97e28a906c476515f3 Mon Sep 17 00:00:00 2001
From: 刘嘉威 <daidaibg@163.com>
Date: 星期一, 10 七月 2023 15:34:59 +0800
Subject: [PATCH] feat: 增加vue2版本的边框组件，添加vueuse依赖 样式微调
---
src/views/index/index.vue | 85 +++++++++++++++++++++++++++++++++++++++---
1 files changed, 79 insertions(+), 6 deletions(-)
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 6a624b0..3b7627a 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -1,17 +1,90 @@
<script setup lang="ts">
-import {currentGET} from "@/api"
-currentGET("leftTop").then(res=>{
- console.log(res);
-})
+import ItemWrap from "@/components/item-wrap";
+import LeftTop from "./left-top.vue";
+import LeftCenter from "./left-center.vue";
+import LeftBottom from "./left-bottom.vue";
+import CenterMap from "./center-map.vue";
+import CenterBottom from "./center-bottom.vue";
+import RightTop from "./right-top.vue";
+import RightCenter from "./right-center.vue";
+import RightBottom from "./right-bottom.vue";
</script>
<template>
- <div class="index">
+ <div class="index-box">
+ <div class="contetn_left">
+ <!-- <div class="pagetab">
+ <div class="item">瀹炴椂鐩戞祴</div>
+ <div class="item">缁熻鍒嗘瀽</div>
+ </div> -->
+ <ItemWrap class="contetn_left-top contetn_lr-item" title="璁惧鎬昏">
+ <LeftTop />
+ </ItemWrap>
+ <ItemWrap class="contetn_left-center contetn_lr-item" title="鐢ㄦ埛鎬昏">
+ <LeftCenter />
+ </ItemWrap>
+ <ItemWrap
+ class="contetn_left-bottom contetn_lr-item"
+ title="璁惧鎻愰啋"
+ style="padding: 0 10px 16px 10px"
+ >
+ <LeftBottom />
+ </ItemWrap>
+ </div>
+ <div class="contetn_center">
+ <CenterMap class="contetn_center_top" title="璁惧鍒嗗竷鍥�" />
+ <ItemWrap class="contetn_center-bottom" title="瀹夎璁″垝">
+ <CenterBottom />
+ </ItemWrap>
+ </div>
+ <div class="contetn_right">
+ <ItemWrap class="contetn_left-bottom contetn_lr-item" title="鎶ヨ娆℃暟">
+ <RightTop />
+ </ItemWrap>
+ <ItemWrap
+ class="contetn_left-bottom contetn_lr-item"
+ title="鎶ヨ鎺掑悕(TOP8)"
+ style="padding: 0 10px 16px 10px"
+ >
+ <RightCenter />
+ </ItemWrap>
+ <ItemWrap class="contetn_left-bottom contetn_lr-item" title="鏁版嵁缁熻鍥� ">
+ <RightBottom />
+ </ItemWrap>
+ </div>
</div>
</template>
<style scoped lang="scss">
-.index{
+.index-box {
+ width: 100%;
+ display: flex;
+ min-height: calc(100% - 64px);
+ justify-content: space-between;
+}
+//宸﹁竟 鍙宠竟 缁撴瀯涓�鏍�
+.contetn_left,
+.contetn_right {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ position: relative;
+ width: 540px;
+ box-sizing: border-box;
+ flex-shrink: 0;
+}
+.contetn_center {
+ flex: 1;
+ margin: 0 54px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ .contetn_center-bottom {
+ height: 315px;
+ }
+}
+.contetn_lr-item {
+ height: 310px;
}
</style>
--
Gitblit v1.8.0