Skip to content

E
emergency-project
Commit 12e23c30 by 吴春元
Options

style: 统一UI样式并添加汉仪黑体字体支持 

- 替换背景色为具体色值
- 添加汉仪黑体字体文件及CSS配置
- 统一按钮、链接等交互元素的悬停样式
- 移除多余代码并优化样式结构
parent e20fe9fb
Showing with 86 additions and 69 deletions
src/assets/base.css
......@@ -68,9 +68,9 @@ body {
background: var(--color-background);
transition: color 0.5s, background-color 0.5s;
line-height: 1.6;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
/* font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
sans-serif; */
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
......
src/assets/main.css
......@@ -69,4 +69,14 @@ a,
font-style: normal;
font-display: swap;
/* 优化字体加载显示 */
}
/* 全局字体 */
@font-face {
font-family: "HanSansSC";
src: url("/fonts/HanSansSC.otf") format("opentype");
font-weight: normal;
font-style: normal;
font-display: swap;
/* 优化字体加载显示 */
}
\ No newline at end of file
src/layout/news.vue
<template>
<div class="bg-container">
<!-- 顶部横幅 -->
<header class="shadow">
<div class="container mx-auto flex items-center" style="height:180px;width: 1440px;">
<img src="@/assets/logo1.png" alt="国徽" class="h-[100px] mr-6" />
<div>
<div class="text-title text-[45px] text-white mb-[-15px]">
太原市互联网应急指挥和举报中心
</div>
<div class="text-title text-[45px] text-white">
(太原市互联网宣传研究中心)
<div>
<div class="bg-container">
<!-- 顶部横幅 -->
<header class="shadow">
<div class="container mx-auto flex items-center" style="height:180px;width: 1440px;">
<img src="@/assets/logo1.png" alt="国徽" class="h-[100px] mr-6" />
<div>
<div class="text-title text-[45px] mb-[-15px]" style="color: #fff;">
太原市互联网应急指挥和举报中心
</div>
<div class="text-title text-[45px]" style="color: #fff;">
(太原市互联网宣传研究中心)
</div>
</div>
</div>
</div>
</header>
<!-- 主导航 -->
<nav class="text-white">
<div class="container mx-auto px-[30px]">
<div class="flex items-center justify-between h-[65px]">
<!-- 主导航菜单 -->
<ul class="flex justify-between w-full max-w-[calc(100%-320px)] h-14">
<li v-for="(item, index) in navItems" :key="index"
class="flex-1 flex items-center justify-center cursor-pointer px-4 relative transform transition-all duration-300 hover:scale-105 hover:-translate-y-2 shadow-lg hover:shadow-xl"
@click="navigateTo(index, item)">
<span class="text-white font-bold text-[20px]">{{ item.categoryTitle }}</span>
<!-- 点击在对应的选中下划线 -->
<div
class="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-[30px] h-[3px] bg-white transition-all duration-300 rounded-[10px]"
:class="{ 'opacity-100': activeNav === index, 'opacity-0': activeNav !== index }">
</div>
</li>
</ul>
<!-- 搜索框 -->
<div class="flex relative w-[240px] mr-[50px]">
<el-input v-model="searchQuery" class="!rounded-full" placeholder="搜索新闻、通知..." :prefix-icon="Search"
@keyup.enter="handleSearch">
<template #append>
<el-icon class="mr-1 text-blue-400 hover:text-blue-600 cursor-pointer" style="color: #2E5BF6;"
@click="handleSearch">
<Search />
</el-icon>
</template>
</el-input>
</header>
<!-- 主导航 -->
<nav>
<div class="container mx-auto px-[30px]">
<div class="flex items-center justify-between h-[65px]">
<!-- 主导航菜单 -->
<ul class="flex justify-between w-full max-w-[calc(100%-320px)] h-14">
<li v-for="(item, index) in navItems" :key="index"
class="flex-1 flex items-center justify-center cursor-pointer px-4 relative transform transition-all duration-300 hover:scale-105 hover:-translate-y-2 shadow-lg hover:shadow-xl"
@click="navigateTo(index, item)">
<span class="text-[20px]" style="color: #fff; font-family: 'HanSansSC';">{{ item.categoryTitle }}</span>
<!-- 点击在对应的选中下划线 -->
<div
class="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-[30px] h-[3px] transition-all duration-300 rounded-[10px]"
style="background-color: #fff;"
:class="{ 'opacity-100': activeNav === index, 'opacity-0': activeNav !== index }">
</div>
</li>
</ul>
<!-- 搜索框 -->
<div class="flex relative w-[240px] mr-[50px]">
<el-input v-model="searchQuery" class="!rounded-full" placeholder="搜索新闻、通知..." :prefix-icon="Search"
@keyup.enter="handleSearch">
<template #append>
<el-icon class="mr-1 cursor-pointer" style="color: #2E5BF6;" @click="handleSearch">
<Search />
</el-icon>
</template>
</el-input>
</div>
</div>
</div>
</div>
</nav>
</nav>
</div>
<router-view></router-view>
<Footer></Footer>
</div>
......@@ -189,6 +190,6 @@ function handleSearch() {
}
.bg-container {
background: url('@/assets/imgs/bg_header.jpg');
background: url('@/assets/imgs/bg_header.jpg') no-repeat center center;
}
</style>
src/layout/py.vue
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="mx-auto">
<header class="hero-bg text-white">
<header class="hero-bg" style="color: #fff;">
<div class="container mx-auto px-[70px] py-8">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
......@@ -18,24 +18,23 @@
</p> -->
<!-- <div class="text-sm opacity-80">承办：黄河新闻网</div> -->
</div>
<p class="text-[16px] opacity-90 cursor-pointer font-bold mt-0" @click="goToHome()">
主办：{{ inject("VITE_APP_TITLE") }}
</p>
<p class="text-[16px] opacity-90 cursor-pointer font-bold mt-0" @click="goToHome()">
主办：{{ inject("VITE_APP_TITLE") }}
</p>
</div>
<nav class="bg-white/10 backdrop-blur-sm">
<nav class="backdrop-blur-sm">
<div class="container mx-auto px-[70px]">
<div class="flex justify-between items-center">
<div v-for="(item, index) in navItems" :key="index"
class="py-4 px-6 cursor-pointer hover:bg-white/10 transition-colors transform transition-all duration-300 hover:scale-105 hover:-translate-y-2 shadow-lg hover:shadow-xl"
:class="{ 'bg-white/10': activeIndex === index }" @click="navigateTo(index, item)">
<span class="text-white text-[16px] font-bold">{{ item.categoryTitle }}</span>
class="py-4 px-6 cursor-pointer transition-colors transform transition-all duration-300 hover:scale-105 hover:-translate-y-2 shadow-lg hover:shadow-xl"
:class="{ 'bg-white-nav': activeIndex === index }" @click="navigateTo(index, item)">
<span class="text-[16px] font-bold" style="color: #fff;">{{ item.categoryTitle }}</span>
</div>
<div class="flex relative w-[240px] mr-[0px]">
<el-input v-model="searchQuery" class="!rounded-full" placeholder="搜索辟谣、权威、法律、专家..." :prefix-icon="Search"
@keyup.enter="handleSearch">
<template #append>
<el-icon class="mr-1 text-blue-400 hover:text-blue-600 cursor-pointer" style="color: #2E5BF6;"
@click="handleSearch">
<el-icon class="mr-1 cursor-pointer" style="color: #2E5BF6;" @click="handleSearch">
<Search />
</el-icon>
</template>
......@@ -265,4 +264,8 @@ function navigateTo(index: number, item: NavItem) {
.text-title {
font-family: 'AlibabaPuHuiTi95';
}
.bg-white-nav {
background-color: rgba(255, 255, 255, 0.1);
}
</style>
src/layout/wm.vue
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="min-h-screen bg-gray-100">
<div class="min-h-screen" style="background-color: #f3f3f3;">
<div class="mx-auto">
<!-- Hero区域 -->
<div class="relative h-[350px] mb-8 overflow-hidden">
......@@ -12,12 +12,12 @@
/> -->
<img src="@/assets/imgs/wmyhs-header-bg.jpg" class="w-full h-full object-cover object-top" />
<div class="absolute inset-0 bg-gradient-to-r from-blue-900/80 via-blue-900/30 to-transparent"></div>
<div class="bg-container absolute inset-0"></div>
</div>
<div class="backdrop-blur-sm rounded-lg cursor-pointer flex justify-end items-end w-auto top-0 right-0"
@click="goToHome()">
<p class="text-white font-bold pt-5 pr-5 text-[20px]">
<p class="font-bold pt-5 pr-5 text-[20px]" style="color: #fff;">
主办：{{ inject("VITE_APP_TITLE") }}
</p>
</div>
......@@ -25,12 +25,12 @@
<div class="relative flex-col justify-center h-full px-12 ms-24 mt-8">
<!-- 顶部区域 -->
<div class="mb-5">
<h2 @click="goToHome()" class="text-6xl font-bold text-white cursor-pointer">
<h2 @click="goToHome()" class="text-6xl font-bold cursor-pointer" style="color: #fff;">
网民
<span class="text-7xl" style="font-family: 'STXingkai', 'KaiTi', cursive">有话说</span>
</h2>
</div>
<p class="text-xl text-gray-200 mb-6">
<p class="text-lg mb-6" style="color: #fff;">
用真诚的态度和专业的服务，构建政民互动的新平台
</p>
<div class="flex items-center gap-4">
......@@ -43,17 +43,16 @@
</template>
</el-input>
<button
class="flex items-center px-4 py-[9px] bg-blue-500 text-white rounded-[10px] hover:bg-blue-600 transition-colors whitespace-nowrap"
style="border: none" @click="handleSearch">
<button class="flex items-center px-4 py-[9px] rounded-[10px] whitespace-nowrap hover:-translate-y-1"
style="border: none; background-color: #2094f3; color: #fff;" @click="handleSearch">
<el-icon class="mr-1">
<Search />
</el-icon>
<span>搜索</span>
</button>
<button @click="iMessageClick"
class="flex items-center px-6 py-[9px] bg-white text-blue-800 rounded-[10px] hover:bg-blue-50 transition-colors !rounded-button whitespace-nowrap"
style="border: none">
class="flex items-center px-6 py-[9px] rounded-[10px] !rounded-button whitespace-nowrap hover:-translate-y-1"
style="border: none; background-color: #fff; color: #2094f3;">
<span>我要留言</span>
<el-icon class="ml-1">
<ArrowRight />
......@@ -191,4 +190,8 @@ function handleSearch() {
.custom-select :deep(.el-input__inner) {
height: 42px;
}
.bg-container {
background: linear-gradient(to right, rgba(2, 82, 161, 0.8), rgba(0, 31, 63, 0.2));
}
</style>
src/views/home/detail/NewsDetail.vue
<template>
<div class="min-h-screen bg-gray-50">
<div class="min-h-screen" style="background-color: #f5f7fa;">
<div class="container mx-auto px-4 py-8 w-[1440px]">
<!-- <bread-crumb
:breadcrumbItems="
......
src/views/wm/imessage/IMessage.vue
......@@ -73,7 +73,6 @@
<div class="col-span-8">
<div class="bg-white rounded-lg shadow-sm p-8">
<h2 class="text-2xl font-bold text-gray-800 mb-6">提交留言</h2>
=
<form @submit.prevent="handleSubmit" class="space-y-6">
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment