From 03c275439949875a857538df89a41696642c42b3 Mon Sep 17 00:00:00 2001
From: zhangwei <1504152376@qq.com>
Date: 星期一, 01 九月 2025 17:15:39 +0800
Subject: [PATCH] '首页公告与详情'
---
src/views/home/index.vue | 745 +++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 484 insertions(+), 261 deletions(-)
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 566fbae..87a030d 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,110 +1,91 @@
<template>
- <div class="header">
- <img width="227px" height="74px" src="@/assets/home/logo.png" alt="" />
- <img width="427px" height="74px" src="@/assets/home/Header.png" alt="" />
- <div class="other">
- <div class="item">
- <img width="21px" height="21px" src="@/assets/home/share.png" alt="" />
- <span>鍒嗕韩缃戠珯</span>
- </div>
- <div class="item">
- <img
- width="21px"
- height="21px"
- src="@/assets/home/BellFilled.png"
- alt=""
- />
- <span>鎴戠殑娑堟伅</span>
- </div>
- </div>
- </div>
- <div class="banner">
- <img width="100%" src="@/assets/home/banner.png" alt="" />
- </div>
+ <my-header />
<div class="notice">
<div class="left">
- <div class="item item1">
- <div style='width:50%'>
- <img src="@/assets/home/notice1.png" alt="" />
- </div>
- <div>鎷涢噰鍏憡</div>
- </div>
- <div class="item">
- <img src="@/assets/home/notice.png" alt="" />
- <div>鎷涢噰鍏憡</div>
- </div>
- <div class="item">
- <img src="@/assets/home/notice.png" alt="" />
- <div>鎷涢噰鍏憡</div>
- </div>
- <div class="item">
- <img src="@/assets/home/notice.png" alt="" />
- <div>鎷涢噰鍏憡</div>
+ <div
+ v-for="(item, index) in state.gonggaoList"
+ :key="index"
+ :class="['item', stateHook.active == index ? 'item1' : '']"
+ @click="getShouyeOrder(index)"
+ >
+ <img
+ v-if="stateHook.active == index"
+ src="@/assets/home/notice1.png"
+ alt=""
+ />
+ <img v-else src="@/assets/home/notice.png" alt="" />
+ <div>{{ item.name }}</div>
</div>
</div>
<div class="right">
- <el-tabs v-model="activeName" class="demo-tabs">
- <el-tab-pane label="宸ョ▼鎷涙爣" name="first">
- <div class="item">
- <span
- ><span style="color: #145ccd; font-weight: 600">路</span
- >銆愬洓宸濈渷鎴愰兘甯傘��2024骞寸煶鐩樿閬撲粯瀹剁鏉戠伯娌逛骇涓氬洯鍖哄強閰嶅鍩虹璁炬柦寤鸿椤圭洰纾嬪晢鍏憡</span
- >
- <span>2024-04-15 18:10</span>
- </div>
- <div class="item">
- <span
- ><span style="color: #145ccd; font-weight: 600">路</span
- >銆愬洓宸濈渷鎴愰兘甯傘�戠唺鐚胺娓稿涓績灞�閮ㄦ敼閫犻」鐩鍟嗗叕鍛�</span
- >
- <span>2024-04-15 18:10</span>
- </div>
- <div class="item">
- <span
- ><span style="color: #145ccd; font-weight: 600">路</span
- >銆愬洓宸濈渷鎴愰兘甯傘�戜腹鏅閬撴皯婀栫ぞ鍖虹孩鐧藉枩浜嬫湇鍔″満鎵�纾嬪晢鍏憡</span
- >
- <span>2024-04-15 18:10</span>
- </div>
- <div class="item">
- <span
- ><span style="color: #145ccd; font-weight: 600">路</span
- >銆愬洓宸濈渷鎴愰兘甯傘�戞垚閮戒笢閮ㄦ柊鍖轰笁宀旀箹楂樼骇涓浣撹壓涓績鍓嶄复鏃跺仠杞﹀尯鍜屾鏍￠棬涓や晶闂ㄥ崼瀹ら棿鍖哄煙榛戝寲鍙婃帓姘存彁鍗囪В闄ゅ唴娑濋」鐩鍟嗗叕鍛�</span
- >
- <span>2024-04-15 18:10</span>
- </div>
- <div class="item">
- <span
- ><span style="color: #145ccd; font-weight: 600">路</span
- >銆愬洓宸濈渷鎴愰兘甯傘�戝洓宸濈渷鎴愰兘鎴掓瘨搴峰鎵�鐥呮畫鎴掓瘨浜哄憳搴峰娲诲姩涓績缁翠慨鏀归�犻」鐩浜屾纾嬪晢鍏憡</span
- >
- <span>2024-04-15 18:10</span>
- </div>
- <div class="item">
- <span
- ><span style="color: #145ccd; font-weight: 600">路</span
- >銆愬洓宸濈渷鎴愰兘甯傘�戣�佸共閮ㄦ椿鍔ㄤ腑蹇冭淇敼閫犻」鐩鍟嗗叕鍛�</span
- >
- <span>2024-04-15 18:10</span>
- </div>
- <div class="item">
- <span
- ><span style="color: #145ccd; font-weight: 600">路</span
- >銆愬洓宸濈渷鎴愰兘甯傘�戦噾鐗涘尯鎶㈤櫓鏁戠伨宸ョ▼椤圭洰宸ョ▼闃熶紞鍌ㄥ搴擄紙鎴垮缓銆佸競鏀跨被锛夋嫑鏍囧叕鍛�</span
- >
- <span>2024-04-15 18:10</span>
- </div>
- </el-tab-pane>
- <el-tab-pane label="璐х墿鎷涙爣" name="second">璐х墿鎷涙爣</el-tab-pane>
- <el-tab-pane label="鏈嶅姟鎷涙爣" name="third">鏈嶅姟鎷涙爣</el-tab-pane>
- <el-tab-pane label="缃戜笂绔炰环" name="fourth">缃戜笂绔炰环</el-tab-pane>
- </el-tabs>
+ <!-- <el-tabs v-model="activeName" class="demo-tabs">
+ <el-tab-pane label="鎰忓悜鍏紑" name="first">
+ 鎰忓悜鍏紑 -->
+ <div
+ v-for="item in stateHook.shouyeOrderList"
+ :key="item.id"
+ class="item"
+ @click="goDetail(item.tenderId ?? item.id)"
+ >
+ <span>
+ <span style="color: #145ccd; font-weight: 600">路</span>
+ {{
+ item.xingzhengquyuName &&
+ `銆�${item.xingzhengquyuName.match(/^.*?甯�/)}銆慲
+ }}
+ {{ item.projectName }}
+ </span>
+ <span>{{ item.createTime }}</span>
+ </div>
+
+ <!-- </el-tab-pane>
+ <el-tab-pane label="宸ョ▼鎷涙爣" name="second">宸ョ▼鎷涙爣</el-tab-pane>
+ <el-tab-pane label="璐х墿鎷涙爣" name="third">璐х墿鎷涙爣</el-tab-pane>
+ <el-tab-pane label="鏈嶅姟鎷涙爣" name="fourth">鏈嶅姟鎷涙爣</el-tab-pane>
+ <el-tab-pane label="缃戜笂绔炰环" name="fourth1">缃戜笂绔炰环</el-tab-pane>
+ </el-tabs> -->
+ </div>
+ </div>
+ <div class="daixie">
+ <div class="contentxie">
+ <div class="itemxie">
+ <img src="@/assets/home/daixie.png" alt="" />
+ <div>甯傚満璋冪爺</div>
+ </div>
+ <div class="itemxie">
+ <img src="@/assets/home/daixie.png" alt="" />
+ <div>闇�姹傚鏌�</div>
+ </div>
+ <div class="itemxie">
+ <img src="@/assets/home/daixie.png" alt="" />
+ <div>灞ョ害楠屾敹</div>
+ </div>
+ <div class="itemxie">
+ <img src="@/assets/home/daixie.png" alt="" />
+ <div>涓氫唬鎺ㄨ崘</div>
+ </div>
+ <div class="itemxie">
+ <img src="@/assets/home/daixie.png" alt="" />
+ <div>涓撳鎰忚</div>
+ </div>
+ <div class="itemxie">
+ <img src="@/assets/home/daixie.png" alt="" />
+ <div class="">涓夋柟寮�鏍�</div>
+ </div>
+ <div class="itemxie">
+ <img src="@/assets/home/daixie.png" alt="" />
+ <div class="">鎷涢噰鍩硅</div>
+ </div>
+ <div class="itemxie">
+ <img src="@/assets/home/daixie.png" alt="" />
+ <div class="">璐㈡斂鐩戠潱</div>
+ </div>
</div>
</div>
<div class="user">
<div class="all">
<div class="left">
- <div class="item item1">
+ <div v-for="item in state.roleList" :key="item.id" class="item item1">
<div class="box">
<img
width="18px"
@@ -112,85 +93,53 @@
src="@/assets/home/car1.png"
alt=""
/>
- 閲囪喘浜�/鎷涙爣浜�
+ {{ item.name }}
</div>
- <span>娉ㄥ唽|鐧诲綍</span>
- </div>
- <div class="item">
- <div class="box">
- <img
- width="18px"
- height="18px"
- src="@/assets/home/car.png"
- alt=""
- />
- 閲囪喘浜�
+ <div>
+ <el-link
+ v-if="state.rolesCode.indexOf(item.code) !== -1"
+ :underline="false"
+ class="hover:cursor-pointer"
+ @click="logOut"
+ >閫�鍑�</el-link
+ >
+ <el-link
+ v-else-if="!state.accessToken"
+ :underline="false"
+ class="hover:cursor-pointer"
+ @click="toRegister(item)"
+ >娉ㄥ唽</el-link
+ >
+ <el-link
+ v-else
+ :underline="false"
+ class="hover:cursor-pointer"
+ @click="toApply(item)"
+ ><span v-if="item.name !== '璇勫涓撳'">鐢宠</span></el-link
+ ><span
+ v-if="!state.accessToken || item.name !== '璇勫涓撳'"
+ class="m-2"
+ >|</span
+ >
+ <el-link
+ v-if="state.rolesCode.indexOf(item.code) !== -1"
+ :underline="false"
+ class="hover:cursor-pointer"
+ @click="toWelcome(item)"
+ >杩涘叆</el-link
+ >
+ <el-link
+ v-else
+ :underline="false"
+ class="hover:cursor-pointer"
+ :disabled="!!state.accessToken"
+ @click="toLogin(item)"
+ >鐧诲綍</el-link
+ >
</div>
- <span>娉ㄥ唽|鐧诲綍</span>
- </div>
- <div class="item">
- <div class="box">
- <img
- width="18px"
- height="18px"
- src="@/assets/home/car.png"
- alt=""
- />鎷涙爣浠ｇ悊鏈烘瀯
- </div>
- <span>娉ㄥ唽|鐧诲綍</span>
- </div>
- <div class="item">
- <div class="box">
- <img
- width="18px"
- height="18px"
- src="@/assets/home/car.png"
- alt=""
- />渚涘簲鍟�
- </div>
- <span>娉ㄥ唽|鐧诲綍</span>
- </div>
- <div class="item">
- <div class="box">
- <img
- width="18px"
- height="18px"
- src="@/assets/home/car.png"
- alt=""
- />璇勫涓撳
- </div>
- <span>娉ㄥ唽|鐧诲綍</span>
</div>
</div>
- <div class="right"></div>
- </div>
- </div>
- <div class="daixie">
- <div class="content">
- <div class="item">
- <img src="@/assets/home/daixie.png" alt="" />
- <span>鏍囦功浠ｅ啓</span>
- </div>
- <div class="item">
- <img src="@/assets/home/daixie.png" alt="" />
- <span>璧勮川璇佷功浠ｅ姙</span>
- </div>
- <div class="item">
- <img src="@/assets/home/daixie.png" alt="" />
- <span>鎷涙爣閲戦</span>
- </div>
- <div class="item">
- <img src="@/assets/home/daixie.png" alt="" />
- <span>娉曞緥鏈嶅姟</span>
- </div>
- <div class="item">
- <img src="@/assets/home/daixie.png" alt="" />
- <span>骞冲彴寮�鍙�</span>
- </div>
- <div class="item">
- <img src="@/assets/home/daixie.png" alt="" />
- <span>鍏紬鍙疯繍钀�</span>
- </div>
+ <div class="right" />
</div>
</div>
<div class="more">
@@ -203,24 +152,24 @@
<img src="@/assets/home/xian.png" alt="" />
<span style="margin-left: 5px">琛屼笟鍔ㄦ��</span>
</div>
- <el-button round
+ <el-button round size="small"
>鏇村<el-icon class="el-icon--right"
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path
fill="currentColor"
d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z"
- ></path></svg></el-icon
+ /></svg></el-icon
></el-button>
</div>
<div class="main">
- <div class="img"></div>
+ <div class="img" />
<div class="right">
<p>鍥藉鍙戝睍鏀归潻濮斿姙鍏巺鍏充簬瑙勮寖鎷涙爣鎶曟爣棰嗗煙淇＄敤璇勪环搴旂敤鐨勯�氱煡</p>
<p class="time">2025-05-22</p>
</div>
</div>
<div class="other">
- <div class="item">
+ <div class="itemother">
<span
><span style="color: #145ccd; font-weight: 600">路</span
>鍥藉鍙戝睍鏀归潻濮斿姙鍏巺鍏充簬瑙勮寖鎷涙爣鎶暵仿仿�</span
@@ -229,75 +178,295 @@
</div>
</div>
</div>
- <div class="item"></div>
- <div class="item"></div>
+ <div class="item">
+ <div class="header">
+ <div
+ style="display: flex; align-items: center; justify-content: center"
+ >
+ <img src="@/assets/home/xian.png" alt="" />
+ <span style="margin-left: 5px">鏀跨瓥娉曡</span>
+ </div>
+ <el-button round size="small"
+ >鏇村<el-icon class="el-icon--right"
+ ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+ <path
+ fill="currentColor"
+ d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z"
+ /></svg></el-icon
+ ></el-button>
+ </div>
+ <div class="main">
+ <div class="img" />
+ <div class="right">
+ <p>鍥藉鍙戝睍鏀归潻濮斿姙鍏巺鍏充簬瑙勮寖鎷涙爣鎶曟爣棰嗗煙淇＄敤璇勪环搴旂敤鐨勯�氱煡</p>
+ <p class="time">2025-05-22</p>
+ </div>
+ </div>
+ <div class="other">
+ <div class="itemother">
+ <span
+ ><span style="color: #145ccd; font-weight: 600">路</span
+ >鍥藉鍙戝睍鏀归潻濮斿姙鍏巺鍏充簬瑙勮寖鎷涙爣鎶暵仿仿�</span
+ >
+ <span class="time">05-22</span>
+ </div>
+ </div>
+ </div>
+ <div class="item">
+ <div class="header">
+ <div
+ style="display: flex; align-items: center; justify-content: center"
+ >
+ <img src="@/assets/home/xian.png" alt="" />
+ <span style="margin-left: 5px">閫氱煡鍏憡</span>
+ </div>
+ <el-button round size="small"
+ >鏇村<el-icon class="el-icon--right"
+ ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+ <path
+ fill="currentColor"
+ d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z"
+ /></svg></el-icon
+ ></el-button>
+ </div>
+ <div class="main">
+ <div class="img" />
+ <div class="right">
+ <p>鍥藉鍙戝睍鏀归潻濮斿姙鍏巺鍏充簬瑙勮寖鎷涙爣鎶曟爣棰嗗煙淇＄敤璇勪环搴旂敤鐨勯�氱煡</p>
+ <p class="time">2025-05-22</p>
+ </div>
+ </div>
+ <div class="other">
+ <div class="itemother">
+ <span
+ ><span style="color: #145ccd; font-weight: 600">路</span
+ >鍥藉鍙戝睍鏀归潻濮斿姙鍏巺鍏充簬瑙勮寖鎷涙爣鎶暵仿仿�</span
+ >
+ <span class="time">05-22</span>
+ </div>
+ </div>
+ </div>
</div>
</div>
+ <div class="zhuanjia w-[72%] mx-auto">
+ <div class="flex justify-between items-center m-5">
+ <div style="display: flex; align-items: center">
+ <img src="@/assets/home/xian.png" alt="" />
+ <span style="margin-left: 5px">涓撳濮斿憳浼�</span>
+ </div>
+ <div>
+ <el-button round size="small">涓撳鎶藉彇</el-button>
+ </div>
+ </div>
+ <div class="flex justify-around items-center mb-5">
+ <img
+ width="216px"
+ height="312px"
+ src="@/assets/home/zhuanjia.png"
+ alt=""
+ />
+ <img
+ width="216px"
+ height="312px"
+ src="@/assets/home/zhuanjia.png"
+ alt=""
+ />
+ <img
+ width="216px"
+ height="312px"
+ src="@/assets/home/zhuanjia.png"
+ alt=""
+ />
+ <img
+ width="216px"
+ height="312px"
+ src="@/assets/home/zhuanjia.png"
+ alt=""
+ />
+ <img
+ width="216px"
+ height="312px"
+ src="@/assets/home/zhuanjia.png"
+ alt=""
+ />
+ <img
+ width="216px"
+ height="312px"
+ src="@/assets/home/zhuanjia.png"
+ alt=""
+ />
+ </div>
+ </div>
+ <div class="daili w-[100%] pt-5 pb-5">
+ <div class="w-[72%] mx-auto bg-white rounded-lg pb-5">
+ <div class="flex justify-between items-center p-5">
+ <div style="display: flex; align-items: center">
+ <img src="@/assets/home/xian.png" alt="" />
+ <span style="margin-left: 5px">浠ｇ悊鏈烘瀯鎺ㄨ崘</span>
+ </div>
+ <div>
+ <el-button round size="small"
+ >鏇村<el-icon class="el-icon--right"
+ ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+ <path
+ fill="currentColor"
+ d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z"
+ /></svg></el-icon
+ ></el-button>
+ </div>
+ </div>
+ <div class="flex flex-wrap justify-between">
+ <div
+ v-for="(item, index) in 15"
+ :key="index"
+ class="w-[24%] p-3 pl-6 mr-12 ml-12 dailimc"
+ >
+ <span
+ ><span style="color: #145ccd; font-weight: 600" class="mr-1.5"
+ >路</span
+ >鍥涘窛鏀块噰鎷涙姇鏍囧挩璇㈡湁闄愬叕鍙�</span
+ >
+ </div>
+ </div>
+ </div>
+ </div>
+ <my-footer />
</template>
-<script lang="ts" setup>
-import { ref } from "vue";
+<script lang="tsx" setup>
+import { onMounted, ref, computed, reactive } from "vue";
+import MyFooter from "./component/myFooter.vue";
+import MyHeader from "./component/myHeader.vue";
+import { useUserStoreHook } from "@/store/modules/user";
+import { exRole } from "@/api/register/index";
+import { storageLocal, isString, isIncludeAllChildren } from "@pureadmin/utils";
+import { initRouter, getTopMenu } from "@/router/utils";
+import { useIndex } from "../home/utils/hook";
+
+import { getToken } from "@/utils/auth";
+import { useRoute, useRouter } from "vue-router";
+const router = useRouter();
+import { useUserStore } from "@/store/modules/user";
+import { addDialog } from "@/components/ReDialog";
+import { applyRole } from "@/api/register/index";
+import { message } from "@/utils/message";
+import type { userType } from "@/store/types";
+import type { RoleItem } from "@/api/types";
+
+const userStore = useUserStore();
+const { stateHook, getShouyeOrder, goDetail } = useIndex();
+
+// 璁块棶 state 灞炴��
+// console.log(userStore.roles,'-'); // 鐩存帴鑾峰彇鍊�
+defineOptions({
+ name: "MainPage"
+});
let activeName = ref("first");
+/** 瑙掕壊锛堝鏋滄樀绉颁负绌哄垯鏄剧ず鐢ㄦ埛鍚嶏級 */
+const getUseRoles = () => {
+ state.userInfo = storageLocal().getItem("user-info");
+ state.userInfo?.exRoles.forEach((element: RoleItem) => {
+ state.rolesCode.push(element.code);
+ });
+};
+const state = reactive({
+ roleList: [],
+ rolesCode: [],
+ userInfo: {} as userType,
+ accessToken: "",
+ gonggaoList: [
+ { name: "鎷涢噰鍏憡" },
+ { name: "鏇存鍏憡" },
+ { name: "缁撴灉鍏憡" }
+ // { name: "鍏朵粬鍏憡" }
+ ]
+});
+onMounted(() => {
+ // exRole().then(res => {
+ // state.roleList = res.result;
+ // });
+ getShouyeOrder(0);
+ state.roleList = useUserStoreHook().rolesList;
+ getUseRoles();
+ state.accessToken = getToken()?.accessToken;
+});
+
+const toRegister = item => {
+ router.push({ name: "newRegister", query: { code: item.code } });
+};
+// 閫�鍑�
+const logOut = () => {
+ useUserStoreHook().logOut();
+ state.rolesCode = [];
+ state.accessToken = "";
+};
+// 鐢宠
+const toApply = item => {
+ addDialog({
+ width: "20%",
+ title: "纭淇℃伅",
+ contentRenderer: () => <p>鏄惁鐢宠涓簕item.name}锛�</p>, // jsx 璇硶 锛堟敞鎰忓湪.vue鏂囦欢鍚敤jsx璇硶,闇�瑕佸湪script寮�鍚痩ang="tsx"锛�
+ closeCallBack: ({ options, args }) => {
+ if (args?.command === "cancel") {
+ // 鎮ㄧ偣鍑讳簡鍙栨秷鎸夐挳
+ } else if (args?.command === "sure") {
+ applyRole({ ruleCode: item.code }).then(res => {
+ if (res.code == 200) {
+ message("鐢宠鎴愬姛锛�", { type: "success" });
+ } else {
+ message(res?.message || "鐢宠澶辫触锛�", { type: "error" });
+ }
+ });
+ } else {
+ }
+ }
+ });
+ // router.push({ name: "RegisterNav", query: { code: item.code } });
+};
+// 鍘婚椤�
+const toWelcome = async item => {
+ // if (useUserStoreHook().nowRole.code !== item.code) {
+ // 鑾峰彇鍚庣璺敱
+ useUserStoreHook()
+ .changeLogoInExRule({
+ ruleCode: item.code
+ })
+ .then(res => {
+ initRouter().then(() => {
+ let path = getTopMenu(true);
+ router.push({ name: path.name });
+ });
+ });
+
+ // }
+};
+// 鍘荤櫥褰�
+const toLogin = item => {
+ router.push({ name: "Login" });
+};
</script>
<style lang="scss" scoped>
-.header {
- display: flex;
- align-items: center;
- justify-content: space-evenly;
- height: 80px;
- width: 100%;
- .middle {
- width: 50%;
- display: flex;
- justify-content: space-around;
- color: rgb(51, 51, 51);
- font-family: 鎬濇簮榛戜綋;
- }
- .other {
- display: flex;
- .item {
- display: flex;
- justify-content: center;
- width: 63px;
- height: 48px;
- color: rgb(51, 51, 51);
- font-family: 鎬濇簮榛戜綋;
- font-size: 12px;
- font-weight: 400;
- line-height: 20px;
- letter-spacing: 0%;
- text-align: left;
- text-transform: capitalize;
- flex-wrap: wrap;
- margin-right: 10px;
- }
- }
-}
-.banner {
- // left: -3.76px;
- // top: 80px;
- // position: absolute;
- width: 100%;
- height: 306px;
-}
.notice {
box-sizing: border-box;
display: flex;
justify-content: space-between;
- width: 1401px;
- height: 518px;
+ width: 72%;
+ height: 400px;
padding: 15px;
margin: 20px auto;
background: rgb(254, 254, 254);
border-radius: 8px;
- box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+ box-shadow:
+ rgba(149, 157, 165, 0.15) 0px -6px 18px,
+ rgba(149, 157, 165, 0.2) 0px 8px 24px;
.left {
width: 10%;
- height: 483px;
+ height: 100%;
display: flex;
flex-wrap: wrap;
- justify-content: space-between;
+ justify-content: space-around;
+ align-content: space-between;
.item {
width: 137px;
height: 111px;
@@ -313,7 +482,8 @@
}
div {
// display: block;
- // width: 100%;
+ width: 100%;
+ text-align: center;
color: rgb(20, 92, 205);
font-size: 20px;
font-weight: 500;
@@ -339,12 +509,12 @@
padding: 0 10px;
}
/* 鍋舵暟琛岃儗鏅壊 */
- .item:nth-child(even) {
+ .item:nth-child(odd) {
background: rgb(244, 244, 244);
border-radius: 4px;
}
/* 濂囨暟琛岃儗鏅壊 */
- .item:nth-child(odd) {
+ .item:nth-child(even) {
padding: 8px;
background-color: #fff;
}
@@ -352,12 +522,12 @@
}
.user {
width: 100%;
- height: 520px;
- background: rgb(248, 248, 248);
- padding-top: 50px;
+ // height: 520px;
+ // background: rgb(248, 248, 248);
+ padding: 40px 0;
.all {
- width: 1401px;
- height: 482px;
+ width: 72%;
+ height: 385px;
background: #fff;
margin: 0 auto;
display: flex;
@@ -373,10 +543,13 @@
display: flex;
justify-content: space-between;
align-items: center;
- padding: 0 50px;
- height: 20%;
+ padding: 0 30px;
+ height: 23%;
text-align: left;
color: #5f5f5f;
+ // box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+ border-radius: 6px;
+ margin-bottom: 10px;
.box {
display: flex;
justify-content: center;
@@ -391,13 +564,13 @@
color: #ffffff;
}
}
- .left :first-child {
- border-top-left-radius: 8px;
- border-top-right-radius: 8px;
- }
- .left *:not(:first-child):not(:last-child) {
- border-bottom: #c6c6c6 1px solid;
- }
+ // .left :first-child {
+ // border-top-left-radius: 8px;
+ // border-top-right-radius: 8px;
+ // }
+ // .left *:not(:first-child):not(:last-child) {
+ // border-bottom: #c6c6c6 1px solid;
+ // }
.right {
background: #a9b3c4;
width: 75%;
@@ -408,36 +581,34 @@
}
.daixie {
width: 100%;
- background: #fff;
- .content {
- width: 1401px;
- height: 140px;
+ // background: #fff;
+ background: rgb(248, 248, 248);
+
+ .contentxie {
+ width: 72%;
+ // height: 140px;
padding: 20px 0;
margin: 0 auto;
display: flex;
justify-content: space-around;
- .item {
+ .itemxie {
width: 13%;
display: flex;
flex-wrap: wrap;
justify-content: center;
- span {
+ div {
+ width: 100%;
+ text-align: center;
color: rgb(95, 95, 95);
font-family: 鎬濇簮榛戜綋;
- font-size: 24px;
+ font-size: 20px;
font-weight: 500;
- line-height: 40.8px;
letter-spacing: 1%;
- text-align: center;
- text-transform: capitalize;
- display: flex;
- flex-direction: row;
- align-items: center;
}
}
img {
- width: 100px;
- height: 106px;
+ width: 91px;
+ height: 97.2px;
}
}
}
@@ -445,7 +616,7 @@
width: 100%;
height: 464px;
background: #f8f8f8;
- padding-top: 50px;
+ padding: 30px 0;
.time {
color: rgb(152, 152, 152);
font-family: Figtree;
@@ -454,9 +625,8 @@
line-height: 24.2px;
}
.content {
- width: 1400px;
+ width: 72%;
height: 415px;
- background: cadetblue;
margin: 0 auto;
display: flex;
justify-content: space-between;
@@ -466,6 +636,7 @@
height: 100%;
border-radius: 8px;
padding: 20px;
+ box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
.header {
height: 41px;
color: rgb(0, 0, 0);
@@ -491,7 +662,7 @@
width: 240px;
color: rgb(95, 95, 95);
font-family: 鎬濇簮榛戜綋;
- font-size: 16px;
+ font-size: 14px;
font-weight: 400;
line-height: 24.2px;
text-align: left;
@@ -500,11 +671,63 @@
}
.other {
width: 100%;
- .item {
+
+ .itemother {
width: 100%;
+ font-size: 14px;
+ padding-top: 10px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ .time {
+ text-align: right;
}
}
}
}
}
+.daili {
+ background: rgb(248, 248, 248);
+ box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+
+ /* 鍋舵暟琛岃儗鏅壊 */
+ .dailimc:nth-child(odd) {
+ background: rgb(244, 244, 244);
+ border-radius: 4px;
+ }
+ /* 濂囨暟琛岃儗鏅壊 */
+
+ .dailimc:nth-child(3n + 2) {
+ // background-color: #fff;
+ background: rgb(244, 244, 244);
+ }
+ .dailimc:nth-child(5) {
+ background-color: #fff;
+ // background: rgb(244, 244, 244);
+ }
+ .dailimc:nth-child(11) {
+ background-color: #fff;
+ // background: rgb(244, 244, 244);
+ }
+}
+.zhuanjia {
+ img {
+ border-radius: 4px;
+ }
+}
+a {
+ font-size: 16px;
+
+ // font-weight: 600;
+ color: #fff;
+}
+a:hover,
+a:active {
+ color: #fff;
+}
+.el-link.is-disabled {
+ color: #a8abb2;
+ cursor: not-allowed;
+}
</style>
--
Gitblit v1.9.1