From 271361c3aac3a872728d3b1424bc0d736e0985b2 Mon Sep 17 00:00:00 2001
From: zhangwei <1504152376@qq.com>
Date: 星期二, 24 六月 2025 15:00:56 +0800
Subject: [PATCH] '首页'
---
src/views/home/index.vue | 349 +++++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 273 insertions(+), 76 deletions(-)
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 566fbae..f565703 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -19,33 +19,32 @@
</div>
</div>
<div class="banner">
- <img width="100%" src="@/assets/home/banner.png" alt="" />
+ <!-- <img width="100%" height="306px" src="@/assets/home/banner.png" alt="" /> -->
</div>
<div class="notice">
<div class="left">
<div class="item item1">
- <div style='width:50%'>
- <img src="@/assets/home/notice1.png" alt="" />
- </div>
+ <img src="@/assets/home/notice1.png" alt="" />
<div>鎷涢噰鍏憡</div>
</div>
<div class="item">
<img src="@/assets/home/notice.png" alt="" />
- <div>鎷涢噰鍏憡</div>
+ <div>鏇存鍏憡</div>
</div>
<div class="item">
<img src="@/assets/home/notice.png" alt="" />
- <div>鎷涢噰鍏憡</div>
+ <div>缁撴灉鍏憡</div>
</div>
<div class="item">
<img src="@/assets/home/notice.png" alt="" />
- <div>鎷涢噰鍏憡</div>
+ <div>鍏朵粬鍏憡</div>
</div>
</div>
<div class="right">
<el-tabs v-model="activeName" class="demo-tabs">
<el-tab-pane label="宸ョ▼鎷涙爣" name="first">
- <div class="item">
+ 宸ョ▼鎷涙爣
+ <!-- <div class="item">
<span
><span style="color: #145ccd; font-weight: 600">路</span
>銆愬洓宸濈渷鎴愰兘甯傘��2024骞寸煶鐩樿閬撲粯瀹剁鏉戠伯娌逛骇涓氬洯鍖哄強閰嶅鍩虹璁炬柦寤鸿椤圭洰纾嬪晢鍏憡</span
@@ -93,12 +92,48 @@
>銆愬洓宸濈渷鎴愰兘甯傘�戦噾鐗涘尯鎶㈤櫓鏁戠伨宸ョ▼椤圭洰宸ョ▼闃熶紞鍌ㄥ搴擄紙鎴垮缓銆佸競鏀跨被锛夋嫑鏍囧叕鍛�</span
>
<span>2024-04-15 18:10</span>
- </div>
+ </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>
+ </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">
@@ -114,7 +149,7 @@
/>
閲囪喘浜�/鎷涙爣浜�
</div>
- <span>娉ㄥ唽|鐧诲綍</span>
+ <div>娉ㄥ唽<span class="m-2">|</span>鐧诲綍</div>
</div>
<div class="item">
<div class="box">
@@ -126,7 +161,7 @@
/>
閲囪喘浜�
</div>
- <span>娉ㄥ唽|鐧诲綍</span>
+ <div>娉ㄥ唽<span class="m-2">|</span>鐧诲綍</div>
</div>
<div class="item">
<div class="box">
@@ -137,7 +172,7 @@
alt=""
/>鎷涙爣浠ｇ悊鏈烘瀯
</div>
- <span>娉ㄥ唽|鐧诲綍</span>
+ <div>娉ㄥ唽<span class="m-2">|</span>鐧诲綍</div>
</div>
<div class="item">
<div class="box">
@@ -148,7 +183,7 @@
alt=""
/>渚涘簲鍟�
</div>
- <span>娉ㄥ唽|鐧诲綍</span>
+ <div>娉ㄥ唽<span class="m-2">|</span>鐧诲綍</div>
</div>
<div class="item">
<div class="box">
@@ -159,40 +194,13 @@
alt=""
/>璇勫涓撳
</div>
- <span>娉ㄥ唽|鐧诲綍</span>
+ <div>娉ㄥ唽<span class="m-2">|</span>鐧诲綍</div>
</div>
</div>
- <div class="right"></div>
+ <div class="right" />
</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>
- </div>
+
<div class="more">
<div class="content">
<div class="item">
@@ -203,24 +211,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,14 +237,164 @@
</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";
+import myFooter from "./component/myFooter.vue";
let activeName = ref("first");
</script>
@@ -278,6 +436,8 @@
// left: -3.76px;
// top: 80px;
// position: absolute;
+ background: url("@/assets/home/banner.png") no-repeat left center;
+ background-size: cover;
width: 100%;
height: 306px;
}
@@ -285,7 +445,7 @@
box-sizing: border-box;
display: flex;
justify-content: space-between;
- width: 1401px;
+ width: 72%;
height: 518px;
padding: 15px;
margin: 20px auto;
@@ -313,7 +473,8 @@
}
div {
// display: block;
- // width: 100%;
+ width: 100%;
+ text-align: center;
color: rgb(20, 92, 205);
font-size: 20px;
font-weight: 500;
@@ -352,11 +513,11 @@
}
.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;
+ width: 72%;
height: 482px;
background: #fff;
margin: 0 auto;
@@ -373,7 +534,7 @@
display: flex;
justify-content: space-between;
align-items: center;
- padding: 0 50px;
+ padding: 0 30px;
height: 20%;
text-align: left;
color: #5f5f5f;
@@ -408,36 +569,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 +604,7 @@
width: 100%;
height: 464px;
background: #f8f8f8;
- padding-top: 50px;
+ padding: 30px 0;
.time {
color: rgb(152, 152, 152);
font-family: Figtree;
@@ -454,9 +613,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 +624,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 +650,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 +659,49 @@
}
.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;
+ }
+}
</style>
--
Gitblit v1.9.1