This commit is contained in:
Air 2024-09-25 09:11:36 +08:00
parent 7072f9bb69
commit ff9c1accb3
4 changed files with 383 additions and 146 deletions

View File

@ -38,4 +38,11 @@
text-overflow: ellipsis;
}
.txt-2 {
overflow: hidden;
display: -webkit-box; /* 使用弹性盒子布局 */
-webkit-line-clamp: 2; /* 限制文本为两行 */
-webkit-box-orient: vertical; /* 设置子元素垂直堆叠 */
text-overflow: ellipsis;
}
</style>

View File

@ -78,6 +78,12 @@ const router = createRouter({
title: '洛阳百姓问政-问政热榜' //title配置
},
component: () => import("../view/hot/index.vue")
}, {
path: "/news_list",
meta: {
title: '洛阳百姓问政-新闻列表' //title配置
},
component: () => import("../view/home/news_list.vue")
}, {
path: "/admin",
meta: {

View File

@ -16,63 +16,58 @@
<div>
<div :style="{ fontSize: '23px', color: '#0051B1', cursor: 'pointer'}">最新问政</div>
<div style="width: 100%;height: 1px;background-color: #E7E7E7;margin: 10px 0px;"></div>
<n-carousel @update:currentIndex="pageNo" autoplay :interval="5000" style="height: 150px;">
<n-carousel-item v-for="item in pageCount">
<div style="">
<div style="height: 150px">
<div style="display: flex;">
<!-- 左侧内容 -->
<div style="width: 50%; cursor: pointer" @click="tn('/info?id=' + item.id)">
<n-flex justify="space-between" :size="[0, 0]" v-for="k in leftContent">
<div class="te" style="font-size: 18px; width: 80%;">
<n-ellipsis :line-clamp="1">
{{ k.politics_title }}
</n-ellipsis>
</div>
<div style="font-size: 18px; width: 15%; text-align: right">
<n-ellipsis :line-clamp="1">
{{ k.department_name }}
</n-ellipsis>
</div>
</n-flex>
<div>
<div style="height: 150px">
<div style="display: flex;">
<!-- 左侧内容 -->
<div style="width: 50%; cursor: pointer" >
<n-flex justify="space-between" :size="[0, 0]" v-for="k in leftContent">
<div class="te" style="font-size: 18px; width: 80%;padding-top: 5px" @click="tn('/info?id=' + k.id)">
<n-ellipsis :line-clamp="1">
{{ k.politics_title }}
</n-ellipsis>
</div>
<view style="height: 150px;background-color: #E7E7E7;width: 2px;margin: 0px 20px"></view>
<!-- 右侧内容 -->
<div style="width: 50%; cursor: pointer" @click="tn('/info?id=' + item.id)">
<n-flex justify="space-between" :size="[0, 0]" v-for="k in rightContent">
<div class="te" style="font-size: 18px; width: 80%;">
<n-ellipsis :line-clamp="1">
{{ k.politics_title }}
</n-ellipsis>
</div>
<div style="font-size: 18px; width: 15%; text-align: right">
<n-ellipsis :line-clamp="1">
{{ k.department_name }}
</n-ellipsis>
</div>
</n-flex>
<div style="font-size: 18px; width: 18%; text-align: right">
<n-ellipsis :line-clamp="1">
{{ k.department_name }}
</n-ellipsis>
</div>
</div>
</n-flex>
</div>
<view style="height: 150px;background-color: #E7E7E7;width: 2px;margin: 0px 20px"></view>
<!-- 右侧内容 -->
<div style="width: 50%; cursor: pointer" >
<n-flex justify="space-between" :size="[0, 0]" v-for="k in rightContent" @click="tn('/info?id=' + k.id)">
<div class="te" style="font-size: 18px; width: 80%;padding-top: 5px">
<n-ellipsis :line-clamp="1">
{{ k.politics_title }}
</n-ellipsis>
</div>
<div style="font-size: 18px; width: 18%; text-align: right">
<n-ellipsis :line-clamp="1">
{{ k.department_name }}
</n-ellipsis>
</div>
</n-flex>
</div>
</div>
</n-carousel-item>
<!-- <template #dots="{ total, currentIndex, to }">-->
<!-- <ul class="custom-dots-yuan">-->
<!-- <li-->
<!-- v-for="index of total"-->
<!-- :key="index"-->
<!-- :class="{ ['is-active-yuan']: currentIndex === index - 1 }"-->
<!-- @click="to(index - 1)"-->
<!-- />-->
<!-- </ul>-->
<!-- </template>-->
</n-carousel>
</div>
</div>
<div class="register-form " style="text-align: center;margin-top: 40px;">
<n-flex justify="center">
<n-pagination @update:page="newPageCheck" :theme-overrides="PaginationThemeOverrides" v-model:page="newPage"
:page-count="newPageCount"
size="medium"
:page-sizes="[{ label: '10条/页',value: 10}]">
</n-pagination>
</n-flex>
</div>
</div>
<div style="margin-top: 30px">
<n-flex justify="center" align="center" :size="[0,0]">
<div style="width: 40%">
<div style="margin-top: 50px">
<n-flex justify="space-between" align="center" :size="[20,0]">
<div style="width: 38%">
<n-flex justify="center" align="center" :size="[15,20]">
<div style="cursor: pointer;display: inline-block" @click="tn('/question')">
<div style="cursor: pointer;display: inline-block;" @click="tn('/question')">
<img src="@/assets/img/zu3.png" style="width: 280px;"/>
</div>
<div style="cursor: pointer;display: inline-block" @click="tn('/department')">
@ -86,66 +81,48 @@
</div>
</n-flex>
<div @click="tn('/admin')"
style="font-size: 20px;cursor: pointer;color: #FFFFFF;margin: 0 auto;border-radius: 5px;width: 90%;background-color: #5985F8;height: 50px;line-height: 50px;text-align: center;margin-top: 30px">
style="margin: 0 auto;font-size: 20px;cursor: pointer;color: #FFFFFF;border-radius: 5px;width: 95%;background-color: #5985F8;height: 50px;line-height: 50px;text-align: center;margin-top: 30px">
部门管理入口
</div>
</div>
<div style="width: 60%;">
<div style="width: 58%;">
<n-flex justify="space-between" :size="[50,0]">
<div>
<!-- <span @click="contneSelect(0)"-->
<!-- :style="{ fontSize: '1.25rem', color: contnetKey === 0 ? '#0051B1' : '#818181', cursor: 'pointer' }">最新问政</span>-->
<span :style="{ fontSize: '23px', color: '#0051B1', cursor: 'pointer'}">最新回复</span>
</div>
<div>
<span style="font-size:23px;color: #818181">涉及部门</span>
<span style="font-size:20px;color: #818181">涉及部门</span>
</div>
</n-flex>
<div style="width: 100%;height: 1px;background-color: #E7E7E7;margin: 10px 0px;"></div>
<n-carousel @update:currentIndex="pageNo" autoplay :interval="5000" style="height: 345px;">
<n-carousel-item v-for="item in pageCount">
<div style="">
<div style="height: 290px">
<div v-for="item in contentList" style="cursor: pointer" @click="tn('/info?id='+item.id)">
<n-flex justify="space-between" :size="[0,0]">
<div class="te" style="font-size: 18px;width: 80%;">
<n-ellipsis :line-clamp="1">
{{ item.politics_title }}
</n-ellipsis>
</div>
<div style="font-size: 18px;width: 15%;text-align: right">
<n-ellipsis :line-clamp="1">
{{ item.department_name }}
</n-ellipsis>
</div>
</n-flex>
<div style="">
<div style="height: 290px">
<div v-for="item in contentList" style="cursor: pointer" @click="tn('/info?id='+item.id)">
<n-flex justify="space-between" :size="[0,0]">
<div class="te" style="font-size: 18px;width: 80%;">
<n-ellipsis :line-clamp="1">
{{ item.politics_title }}
</n-ellipsis>
</div>
</div>
<!-- <div class="register-form " style="text-align: center;margin-top: 1.25rem;">-->
<!-- <n-flex justify="center">-->
<!-- <n-pagination @update:page="pageCheck" :theme-overrides="PaginationThemeOverrides" v-model:page="page"-->
<!-- :page-count="pageCount"-->
<!-- size="medium"-->
<!-- :page-sizes="[{ label: '10条/页',value: 10}]">-->
<!-- </n-pagination>-->
<!-- </n-flex>-->
<!-- </div>-->
<div style="font-size: 18px;width: 15%;text-align: right">
<n-ellipsis :line-clamp="1">
{{ item.department_name }}
</n-ellipsis>
</div>
</n-flex>
</div>
<div style="width: 100%;height: 1px;background-color: #E7E7E7;"></div>
</n-carousel-item>
<template #dots="{ total, currentIndex, to }">
<ul class="custom-dots-yuan">
<li
v-for="index of total"
:key="index"
:class="{ ['is-active-yuan']: currentIndex === index - 1 }"
@click="to(index - 1)"
/>
</ul>
</template>
</n-carousel>
</div>
<div style="width: 100%;height: 1px;background-color: #E7E7E7;"></div>
<div class="register-form " style="text-align: center;margin-top: 1.25rem;">
<n-flex justify="center">
<n-pagination @update:page="pageCheck" :theme-overrides="PaginationThemeOverrides" v-model:page="page"
:page-count="pageCount"
size="medium"
:page-sizes="[{ label: '10条/页',value: 10}]">
</n-pagination>
</n-flex>
</div>
</div>
</div>
</n-flex>
</div>
@ -160,8 +137,8 @@
</div>
</div>
<div style="margin-top: 20px">
<n-flex align="center">
<div style="width: 42.5%;position: relative">
<n-flex justify="space-between" align="center">
<div style="width: 32%;position: relative">
<n-carousel draggable show-arrow :autoplay="true">
<div v-for="item in 5" style="padding: 10px">
<img style="border-radius: 10px;width: 100%"
@ -204,34 +181,123 @@
</template>
</n-carousel>
</div>
<div style="width: 50%">
<div style="width: 65%">
<n-flex justify="space-between">
<div v-for="(item, index) in groupList" @click="openGroup(item.id)"
:class="{ 'int': true, 'act': item.id == groupIndex }" style="position: relative">
<div>{{ item.name }}</div>
<div v-if="item.id == groupIndex"
style="margin: 0 auto;left: 0;right:0;width: 50px;height: 3px;background-color: #0051B1;position: absolute;bottom: -7px;border-radius: 10px"></div>
<div class="act int">公示公告</div>
<div @click="tn('/news_list?type=4')" style="color: #818181;font-size: 18px;cursor: pointer">
<span style="vertical-align: middle">更多</span>
<svg style="width: 20px;height: 20px;color: #818181;vertical-align: middle"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28">
<g fill="none">
<path
d="M9.97 4.22a.75.75 0 0 1 1.06 0l8.75 8.75a.75.75 0 0 1 0 1.06l-8.75 8.75a.75.75 0 1 1-1.06-1.06l8.22-8.22l-8.22-8.22a.75.75 0 0 1 0-1.06z"
fill="currentColor"></path>
</g>
</svg>
</div>
</n-flex>
<div style="width: 100%;background-color: #E7E7E7;height: 2px;opacity: 0.35;margin-top: 5px"></div>
<div style="height: 300px;padding-top: 10px">
<div style="cursor: pointer;padding: 5px 0px;" v-for="(item,index) in groupNews"
@click="tn('/news_info?id='+item.id)">
<n-flex justify="space-between">
<div class="txt-1 xw_width" style="font-size: 17px;">
<text class="news_title" style="vertical-align: middle;margin-left: 5px">{{
item.news_title
}}
</text>
<n-carousel draggable style="height: 360px" @update:currentIndex="groupNewsNext">
<n-carousel-item v-for="k in groupNewsLastPage>6?6:groupNewsLastPage">
<div style="height: 360px;padding-top: 10px">
<div style="cursor: pointer;padding: 5px 0px;" v-for="(item,index) in groupNews"
@click="tn('/news_info?id='+item.id)">
<n-flex justify="space-between">
<div class="txt-1 xw_width" style="font-size: 17px;">
<text class="news_title" style="vertical-align: middle;margin-left: 5px">{{ item.news_title }}
</text>
</div>
<div style="color: #818794;text-align: right">{{ item.showtime }}</div>
</n-flex>
</div>
<div style="color: #818794;text-align: right">{{ item.showtime }}</div>
</n-flex>
<div style="width: 100%;background-color: #E7E7E7;height: 2px;opacity: 0.35;margin-top: 10px"></div>
</div>
</n-carousel-item>
<template #dots="{ total, currentIndex, to }">
<ul class="custom-dots-yuan">
<li
v-for="index of total"
:key="index"
:class="{ ['is-active-yuan']: currentIndex === index - 1 }"
@click="to(index - 1)"
/>
</ul>
</template>
</n-carousel>
</div>
</n-flex>
</div>
<div style="margin-top: 50px">
<n-flex>
<div style="width: 30%">
<n-flex justify="space-between">
<div class="act int">跟踪问效</div>
<div @click="tn('/news_list?type=1')" style="color: #818181;font-size: 18px;cursor: pointer">
<span style="vertical-align: middle">更多</span>
<svg style="width: 20px;height: 20px;color: #818181;vertical-align: middle"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28">
<g fill="none">
<path
d="M9.97 4.22a.75.75 0 0 1 1.06 0l8.75 8.75a.75.75 0 0 1 0 1.06l-8.75 8.75a.75.75 0 1 1-1.06-1.06l8.22-8.22l-8.22-8.22a.75.75 0 0 1 0-1.06z"
fill="currentColor"></path>
</g>
</svg>
</div>
</n-flex>
<div style="padding-top: 10px">
<div class="txt-2 left-gz" v-for="item in groupNewsGz" @click="tn('/news_info?id='+item.id)">
<span style="padding-right: 5px"></span>
<span>{{item.news_title}}</span>
</div>
</div>
</div>
<div style="height: 600px;background-color: #E7E7E7;width: 1px;margin: 0px 20px"></div>
<div style="width: 63%">
<n-flex justify="space-between">
<div class="act int">问政回音壁</div>
<div @click="tn('/news_list?type=6')" style="color: #818181;font-size: 18px;cursor: pointer">
<span style="vertical-align: middle">更多</span>
<svg style="width: 20px;height: 20px;color: #818181;vertical-align: middle"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28">
<g fill="none">
<path
d="M9.97 4.22a.75.75 0 0 1 1.06 0l8.75 8.75a.75.75 0 0 1 0 1.06l-8.75 8.75a.75.75 0 1 1-1.06-1.06l8.22-8.22l-8.22-8.22a.75.75 0 0 1 0-1.06z"
fill="currentColor"></path>
</g>
</svg>
</div>
</n-flex>
<div style="padding-top: 20px">
<div>
<div class="left-gz" v-for="item in groupNewsHy" >
<div style="font-size: 20px;" @click="tn('/news_info?id='+item.id)">{{item.news_title}}</div>
<div class="txt-2" style="font-size: 15px;margin-top: 10px" @click="tn('/news_info?id='+item.id)">{{item.news_content}}</div>
<div>
<n-grid x-gap="12" :cols="3">
<n-gi v-for="i in item.news_image.slice(0, 3)">
<n-image
object-fit="cover"
:height="100"
:width="100"
:src="i"
/>
</n-gi>
</n-grid>
</div>
<div style="font-size: 14px;color: #9E9E9E;margin-top: 10px">{{item.showtime}}</div>
<div style="width: 100%;height: 1px;background-color: #F5F5F5;margin-top: 20px"></div>
</div>
</div>
</div>
</div>
</n-flex>
</div>
</div>
</div>
<Footer/>
@ -242,27 +308,40 @@ import Header from "@/components/Head.vue";
import Footer from "@/components/Footer.vue";
import {PaginationProps, useMessage} from 'naive-ui'
import {getPolitics, getNewsbx, getNewsbxList} from "@/api/index";
import {ref, reactive, onMounted,computed} from 'vue'
import {ref, reactive, onMounted, computed} from 'vue'
import {useRouter} from "vue-router";
const message = useMessage()
const page = ref(1);
const pageCount = ref(1);
const newPage = ref(1);
const newPageCount = ref(1);
const contentList = ref([]);
const contnetKey = ref(0);
const groupList = ref([]);
const groupIndex = ref(0);
const groupNews = ref([]);
const newList = ref([]);
const router = useRouter()
onMounted(() => {
getApiPolitics();
getApiNewsbx();
getApiNewPolitics();
getApiNewsList();
getApiNewsListGz();
getApiNewsListHy();
})
const leftContent = computed(() => contentList.value.slice(0, 4));
const rightContent = computed(() => contentList.value.slice(4, 8));
const leftContent = computed(() => newList.value.slice(0, 4));
const rightContent = computed(() => newList.value.slice(4, 8));
const getApiNewPolitics = () => {
getPolitics({'type': 2, 'page': newPage.value, 'size': 8}).then(res => {
if (res.code == 200) {
newList.value = res.data.data;
//pageCount.value = Math.ceil(res.count / 6);
newPageCount.value = res.data.last_page;
} else {
message.error(res.msg)
}
});
}
const getApiPolitics = () => {
getPolitics({'type': contnetKey.value, 'page': page.value, 'size': 8}).then(res => {
getPolitics({'type': 1, 'page': page.value, 'size': 8}).then(res => {
if (res.code == 200) {
contentList.value = res.data.data;
//pageCount.value = Math.ceil(res.count / 6);
@ -272,43 +351,55 @@ const getApiPolitics = () => {
}
});
}
const getApiNewsbx = () => {
getNewsbx({'flag': 'index'}).then(res => {
const groupNews = ref([]);
const groupNewsPage = ref(1);
const groupNewsLastPage = ref(1);
const getApiNewsList = () => {
getNewsbxList({'gory_id': 6, 'page': groupNewsPage.value, 'pageSize': 8}).then(res => {
console.log(res);
if (res.code == 200) {
groupList.value = res.data;
groupIndex.value = res.data[0].id;
getApiNewsList(res.data[0].id);
groupNews.value = res.data.data;
groupNewsLastPage.value = res.data.last_page;
} else {
message.error(res.msg)
}
});
}
const getApiNewsList = (gory_id) => {
getNewsbxList({'gory_id': gory_id, 'page': 1, 'pageSize': 7}).then(res => {
const groupNewsGz = ref([]);
const getApiNewsListGz = () => {
getNewsbxList({'gory_id': 1, 'page': 1, 'pageSize': 8}).then(res => {
console.log(res);
if (res.code == 200) {
groupNews.value = res.data;
groupNewsGz.value = res.data.data;
} else {
message.error(res.msg)
}
});
}
const openGroup = (index) => {
groupIndex.value = index;
getApiNewsList(index);
const groupNewsHy = ref([]);
const getApiNewsListHy = () => {
getNewsbxList({'gory_id': 6, 'page': 1, 'pageSize': 8}).then(res => {
console.log(res);
if (res.code == 200) {
groupNewsHy.value = res.data.data;
} else {
message.error(res.msg)
}
});
}
const pageNo = (index) => {
page.value = index + 1;
getApiPolitics();
const groupNewsNext = (d) => {
groupNewsPage.value = d + 1;
getApiNewsList();
}
const pageCheck = (p) => {
console.log(p);
page.value = p;
getApiPolitics();
}
const contneSelect = (type) => {
contnetKey.value = type;
page.value = 1;
getApiPolitics();
const newPageCheck = (p) => {
console.log(p);
newPage.value = p;
getApiNewPolitics();
}
const chunk = (arr, size) => {
const firstChunkSize = Math.ceil(arr.length / 2);
@ -447,7 +538,7 @@ const tn = (url) => {
.custom-dots-yuan {
padding: 0;
position: absolute;
bottom: 20px;
bottom: 0px;
left: 0;
right: 0;
margin: 0 auto;
@ -475,6 +566,15 @@ const tn = (url) => {
width: 70%;
}
.left-gz {
font-size: 16px;
padding-bottom: 20px;
cursor: pointer;
}
.left-gz:hover{
color: #0051B1;
}
/* 当屏幕宽度小于1366px时设置宽度为50% */
@media (max-width: 1366px) {
.xw_width {

124
src/view/home/news_list.vue Normal file
View File

@ -0,0 +1,124 @@
<template>
<Header/>
<div style="padding: 15px 200px;background-color: #ffffff;overflow: hidden">
<div>
<n-flex>
<div style="width: 100%">
<div style="font-size: 20px">
<span @click="tn('/')" style="vertical-align: middle;cursor: pointer">首页</span>
<svg style="margin: 0px 10px;width: 25px;height: 25px;vertical-align: middle;color: #999999" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
<g fill="none">
<path
d="M8.646 4.147a.5.5 0 0 1 .707-.001l5.484 5.465a.55.55 0 0 1 0 .779l-5.484 5.465a.5.5 0 0 1-.706-.708L13.812 10L8.647 4.854a.5.5 0 0 1-.001-.707zm-4 0a.5.5 0 0 1 .707-.001l5.484 5.465a.55.55 0 0 1 0 .779l-5.484 5.465a.5.5 0 0 1-.706-.708L9.812 10L4.647 4.854a.5.5 0 0 1-.001-.707z"
fill="currentColor"></path>
</g>
</svg>
<span v-if="id==6" style="color: #0051B1;vertical-align: middle;cursor: pointer">问政回音壁</span>
<span v-if="id==4" style="color: #0051B1;vertical-align: middle;cursor: pointer">公示公告</span>
<span v-if="id==1" style="color: #0051B1;vertical-align: middle;cursor: pointer">跟踪问效</span>
</div>
<div style="width: 100%;height: 1px;background-color: #E7E7E7;margin: 20px 0px"></div>
<div>
<div>
<div class="left-gz" v-for="item in groupNews" >
<div style="font-size: 20px;" @click="tn_back('/news_info?id='+item.id)">{{item.news_title}}</div>
<div class="txt-2" style="font-size: 15px;margin-top: 10px" @click="tn_back('/news_info?id='+item.id)">{{item.news_content}}</div>
<div>
<n-grid x-gap="12" :cols="3">
<n-gi v-for="i in item.news_image.slice(0, 3)">
<n-image
object-fit="cover"
:height="100"
:width="100"
:src="i"
/>
</n-gi>
</n-grid>
</div>
<div style="font-size: 14px;color: #9E9E9E;margin-top: 10px">{{item.showtime}}</div>
<div style="width: 100%;height: 1px;background-color: #F5F5F5;margin: 20px 0px"></div>
</div>
</div>
</div>
</div>
</n-flex>
<div class="register-form " style="text-align: center;margin-top: 1.25rem;">
<n-flex justify="center">
<n-pagination @update:page="newPageCheck" :theme-overrides="PaginationThemeOverrides" v-model:page="groupNewsPage"
:page-count="groupNewsLastPage"
size="medium"
:page-sizes="[{ label: '10条/页',value: 10}]">
</n-pagination>
</n-flex>
</div>
</div>
</div>
<Footer/>
</template>
<script setup lang="ts">
import Header from "@/components/Head.vue";
import Footer from "@/components/Footer.vue";
import {onMounted, reactive, ref} from "vue";
import {getNewsbxList} from "@/api/index";
import {PaginationProps, useMessage} from "naive-ui";
import {useRouter} from "vue-router";
const id=ref(0);
const message = useMessage()
const router = useRouter()
onMounted(() => {
id.value=router.currentRoute.value.query.type;
console.log(id.value);
getApiNewsList();
})
const groupNews = ref([]);
const groupNewsPage = ref(1);
const groupNewsLastPage = ref(1);
const getApiNewsList = () => {
getNewsbxList({'gory_id': id.value, 'page': groupNewsPage.value, 'pageSize': 8}).then(res => {
console.log(res);
if (res.code == 200) {
groupNews.value = res.data.data;
groupNewsLastPage.value = res.data.last_page;
} else {
message.error(res.msg)
}
});
}
const newPageCheck = (p) => {
console.log(p);
groupNewsPage.value = p;
getApiNewsList();
//
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
const tn = (url) => {
router.push(url)
}
const tn_back = (url) => {
window.open('/#' + url, '_blank'); //
}
type PaginationThemeOverrides = NonNullable<PaginationProps['themeOverrides']>
const PaginationThemeOverrides: PaginationThemeOverrides = {
"itemTextColorHover": "#0051B1",
"itemTextColorPressed": "#0051B1",
"itemTextColorActive": "#ffffff",
"itemBorderActive": "1px solid #0051B1",
"itemColorActive": "#0051B1",
"itemColor": "#F5F5F5",
"itemColorActiveHover": "#0051B1"
}
</script>
<style scoped>
.left-gz:hover {
color: #0051b1;
cursor: pointer;
}
.my_html img {
width: 100% !important;
}
</style>