From a8b22d9a1bbee15caa378c7c3af519db51c97efc Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 08 Nov 2024 12:31:44 +0800
Subject: [PATCH] 企业详情样式调整； 企业详情加载范围瀑布图；
---
src/views/companyInfo/components/centerContainer.vue | 143 +++++++++++++++++++++++++----------------------
1 files changed, 75 insertions(+), 68 deletions(-)
diff --git a/src/views/companyInfo/components/centerContainer.vue b/src/views/companyInfo/components/centerContainer.vue
index 57fc426..2f98ca5 100644
--- a/src/views/companyInfo/components/centerContainer.vue
+++ b/src/views/companyInfo/components/centerContainer.vue
@@ -1,114 +1,121 @@
+<!--
+ * @Author: shuishen 1109946754@qq.com
+ * @Date: 2024-11-08 11:00:30
+ * @LastEditors: shuishen 1109946754@qq.com
+ * @LastEditTime: 2024-11-08 12:07:12
+ * @FilePath: \bigScreen\src\views\companyInfo\components\centerContainer.vue
+ * @Description:
+ *
+ * Copyright (c) 2024 by shuishen, All Rights Reserved.
+-->
<script setup>
-
import { useRouter, useRoute } from 'vue-router'
let router = useRouter()
import { useRouterStore } from 'store/router'
const store = useRouterStore()
-
-
-
let data = reactive({
- companyInfo: {}
+ companyInfo: {}
})
-let buttonIndex = defineProps({
- buttonIndex: Number
+let { buttonIndex } = defineProps({
+ buttonIndex: Number
})
onMounted(() => {
- data.companyInfo = JSON.parse(localStorage.getItem('companyInfo'))
+ data.companyInfo = JSON.parse(localStorage.getItem('companyInfo'))
})
// 父级方法
-const emit = defineEmits(['childEvent']);
+const emit = defineEmits(['childEvent'])
// 回调父级方法
const handleClick = (index) => {
- console.log(index)
- emit('childEvent', index)
+ emit('childEvent', index)
}
// 返回首页
const goHome = () => {
- store.setLoadSub(false)
- router.push('/layout')
+ store.setLoadSub(false)
+ router.push('/layout')
}
-
</script>
<template>
- <div class="center-container">
- <div class="center-container-title">
- <el-row>
- <el-col :span="7">
- <div class="center-name">{{ data.companyInfo.name }}</div>
- </el-col>
- <el-col :span="10">
- <div class="button-group">
- <button @click="handleClick(1)">基本信息</button>
- <button @click="handleClick(2)">应急物质</button>
- <button @click="handleClick(3)">救援队伍</button>
- </div>
- </el-col>
- <el-col :span="7">
- <div class="center-info">
- <button @click="goHome()">返回首页</button>
- </div>
- </el-col>
- </el-row>
- </div>
- </div>
+ <div class="title">{{ data.companyInfo.name }}</div>
+ <div class="menu-box">
+ <div :class="{ on: buttonIndex == 1 }" class="sub-menu" @click="handleClick(1)"> 基本信息 </div>
+ <div :class="{ on: buttonIndex == 2 }" class="sub-menu" @click="handleClick(2)"> 应急物质 </div>
+ <div :class="{ on: buttonIndex == 3 }" class="sub-menu" @click="handleClick(3)"> 救援队伍 </div>
+ </div>
+ <div class="back-hoem">
+ <div class="center-info cursor-p" @click="goHome()">返回首页 </div>
+ </div>
</template>
-<style lang="scss" scoped >
-.center-container {
- margin: 10px auto;
- margin-top: -30px;
- color: #fff;
- pointer-events: auto;
+<style lang="scss" scoped>
+.title {
+ position: absolute;
+ bottom: 2px;
+ left: 74px;
+
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+ font-weight: 400;
+ font-size: 24px;
+ color: #FFFFFF;
+ line-height: 38px;
+ letter-spacing: 3px;
+ text-shadow: 2px 3px 0px rgba(17, 20, 22, 0.2196);
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
}
-.center-container-title {}
+.menu-box {
+ position: absolute;
+ bottom: 0px;
+ left: 592px;
-.center-name {
- font-size: 30px;
- margin: 10px 0;
- margin-left: 15px;
- font-family: YouSheBiaoTiHei;
+ display: flex;
-}
+ &>div {
+ width: 146px;
+ height: 36px;
+ line-height: 48px;
-.button-group {
- margin-top: 26px;
cursor: pointer;
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+ font-weight: 400;
+ font-size: 20px;
+ color: #BFD3E5;
+ text-align: center;
+ font-style: normal;
+ text-transform: none;
+ }
+
+ &>div.on {
+ color: #F6FCFF;
+ background: url(/images/mode-tab-ac.png) no-repeat center / 100% 100%;
+ }
}
-.button-group button {
- width: 120px;
- border: none;
- background-color: transparent;
- color: #fff;
- font-size: 18px;
- font-family: YouSheBiaoTiHei;
- background-image: url(/images/mode-tab-ac.png);
-}
+.back-hoem {
+ position: absolute;
+ bottom: 2px;
+ right: 30px;
-.center-info {
- text-align: right;
- margin-top: 10px;
- margin-right: 30px;
-}
-
-.center-info button {
+ .center-info {
width: 120px;
height: 40px;
+ line-height: 40px;
border: none;
border-radius: 20px;
color: #fff;
background-color: transparent;
font-size: 20px;
+ text-align: center;
background-image: url(/images/mode-tab.png);
-}
+ }
-button:hover {
+ .center-info:hover {
background-color: #3c5e8f;
+ }
}
</style>
--
Gitblit v1.9.3