From 7712cab1e21e5e46cf2977dd117d0dbae6e5548c Mon Sep 17 00:00:00 2001
From: 刘嘉威 <daidaibg@163.com>
Date: 星期五, 21 十月 2022 10:29:17 +0800
Subject: [PATCH] feat: 增加外边框组件
---
src/views/HomeView.vue | 5 ++
src/components/item-wrap/index.ts | 2 +
src/components/item-wrap/item-wrap.vue | 15 +++++++
src/views/index/left-top.vue | 20 ++++++++++
src/views/index/index.vue | 72 +++++++++++++++++++++++++++++++++---
5 files changed, 107 insertions(+), 7 deletions(-)
diff --git a/src/components/item-wrap/index.ts b/src/components/item-wrap/index.ts
new file mode 100644
index 0000000..ea60752
--- /dev/null
+++ b/src/components/item-wrap/index.ts
@@ -0,0 +1,2 @@
+import ItemWrap from "./item-wrap.vue"
+export default ItemWrap
\ No newline at end of file
diff --git a/src/components/item-wrap/item-wrap.vue b/src/components/item-wrap/item-wrap.vue
new file mode 100644
index 0000000..d8c1dd3
--- /dev/null
+++ b/src/components/item-wrap/item-wrap.vue
@@ -0,0 +1,15 @@
+<script setup lang='ts'>
+
+</script>
+
+<template>
+ <div class='item-wrap'>
+
+ </div>
+</template>
+
+<style scoped lang='scss'>
+.item-wrap{
+ border: red dashed 1px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 1de65e4..6661759 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,8 +1,10 @@
<script setup lang="ts">
+import {ref} from "vue"
import { RouterView } from "vue-router";
import ScaleScreen from "@/components/scale-screen";
import Headers from "./header.vue";
const wrapperStyle = {};
+const autoScale = ref(false)
</script>
<template>
@@ -11,8 +13,9 @@
height="1080"
:delay="500"
:fullScreen="false"
- :boxStyle="{ background: '#03050C' }"
+ :boxStyle="{ background: '#03050C',overflow:autoScale?'hidden':'auto' }"
:wrapperStyle="wrapperStyle"
+ :autoScale="autoScale"
>
<div class="content_wrap">
<Headers />
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 6a624b0..59d1174 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -1,17 +1,77 @@
<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";
</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" />
+ <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;
+}
+.contetn_lr-item {
+ height: 310px;
}
</style>
diff --git a/src/views/index/left-top.vue b/src/views/index/left-top.vue
new file mode 100644
index 0000000..ea4f238
--- /dev/null
+++ b/src/views/index/left-top.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { currentGET } from "@/api";
+currentGET("leftTop").then((res) => {
+ console.log(res);
+});
+</script>
+
+<template>
+ <div class="left-top">
+
+ </div>
+</template>
+
+<style scoped lang="scss">
+.left-top{
+ width: 100%;
+ height: 100%;
+}
+</style>
--
Gitblit v1.8.0