This commit is contained in:
quantulr
2024-03-03 12:46:51 +08:00
parent 184f041784
commit d62ff99e03
8 changed files with 142 additions and 91 deletions

View File

@ -5,7 +5,7 @@
<span>{{ t('common.siteTitle') }}</span> <span>{{ t('common.siteTitle') }}</span>
</div> </div>
<el-row style="height: 80px"> <el-row style="height: 80px">
<el-col :span="16"> <el-col :span="20">
<ul class="menu"> <ul class="menu">
<li class="menu-item1"> <li class="menu-item1">
<div <div
@ -298,7 +298,7 @@ dt {
left: 0; left: 0;
width: 100%; width: 100%;
//height: 80px; //height: 80px;
padding: 0 260px; padding: 0 120px;
box-sizing: border-box; box-sizing: border-box;
background: #ffffff; background: #ffffff;
box-shadow: 0px 0px 43px 0px rgba(0, 42, 255, 0.09); box-shadow: 0px 0px 43px 0px rgba(0, 42, 255, 0.09);

View File

@ -20,5 +20,11 @@ const home = {
memberServiceContent: "Содержание услуг для членов", memberServiceContent: "Содержание услуг для членов",
// 是否确认解绑实验室 // 是否确认解绑实验室
unbindLab: "Вы уверены, что хотите отвязать лабораторию?", unbindLab: "Вы уверены, что хотите отвязать лабораторию?",
// 新闻动态
news: "Новости",
// 政策解读
policyAnalyzing: "анализ политики",
// 通知公告
announcement: "объявление"
}; };
export default home; export default home;

View File

@ -16,6 +16,12 @@ const home = {
memberServiceContent: "会员服务内容", memberServiceContent: "会员服务内容",
// 是否确认解绑实验室 // 是否确认解绑实验室
unbindLab: "是否确认解绑实验室", unbindLab: "是否确认解绑实验室",
// 新闻动态
news: "新闻动态",
// 政策解读
policyAnalyzing: "政策解读",
// 通知公告
announcement: "通知公告"
}; };
export default home; export default home;

View File

@ -549,13 +549,13 @@ watch(mapIndex, (newVal, oldVal) => {
z-index: 101; z-index: 101;
&.area { &.area {
top: 200px; top: 60px;
left: 120px; left: 60px;
} }
&.industry { &.industry {
top: 200px; top: 60px;
right: 120px; right: 60px;
} }
.table { .table {

View File

@ -108,6 +108,7 @@ getInfo();
} }
.tit { .tit {
visibility: hidden;
text-align: center; text-align: center;
font-size: 30px; font-size: 30px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
@ -116,6 +117,7 @@ getInfo();
} }
.content { .content {
visibility: hidden;
font-size: 16px; font-size: 16px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: 500; font-weight: 500;

View File

@ -1,91 +1,128 @@
<script setup> <script setup>
import {reactive, ref, toRefs} from "vue"; import { reactive, ref, toRefs } from "vue";
import {listNews} from "@/api/website/home/news"; import { listNews } from "@/api/website/home/news";
import Pagination from "@/components/Pagination/index.vue"; import Pagination from "@/components/Pagination/index.vue";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
const file_base_url = `${import.meta.env.VITE_APP_BASE_API}/file`;
const total = ref(0);
const newsList = ref([]);
const file_base_url = `${import.meta.env.VITE_APP_BASE_API}/file`
const total = ref(0)
const newsList = ref([])
const data = reactive({ const data = reactive({
latestNews: {},
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 4, pageSize: 8,
classification: "0" classification: "0",
} },
}) });
const {queryParams} = toRefs(data) const { queryParams, latestNews } = toRefs(data);
const getList = () => { const getList = () => {
listNews(queryParams.value).then(resp => { listNews(queryParams.value).then((resp) => {
newsList.value = resp.rows newsList.value = resp.rows;
total.value = resp.total total.value = resp.total;
}) });
} };
const getLatestNews = () => {
listNews({ pageNum: 1, pageSize: 1 }).then((resp) => {
if (resp.total) {
latestNews.value = resp.rows[0];
}
});
};
getLatestNews();
const handleTabChange = (tab) => { const handleTabChange = (tab) => {
queryParams.value.classification = tab queryParams.value.classification = tab;
getList() getList();
} };
getList() getList();
</script> </script>
<template> <template>
<div class="app-container" style="height: 100%"> <div class="news-container" style="height: 100%">
<el-tabs @tab-change="handleTabChange" v-model="queryParams.classification"> <div class="left">
<el-tab-pane name="0" label="新闻"></el-tab-pane> <img class="cover-image" :src="`${file_base_url}${latestNews?.cover}`" />
<el-tab-pane name="1" label="政策"></el-tab-pane> <p class="title">{{ latestNews?.title }}</p>
</el-tabs> </div>
<div class="right">
<el-tabs
@tab-change="handleTabChange"
v-model="queryParams.classification"
>
<el-tab-pane name="0" :label="t('home.news')"></el-tab-pane>
<el-tab-pane name="1" :label="t('home.policyAnalyzing')"></el-tab-pane>
<el-tab-pane name="2" :label="t('home.announcement')"></el-tab-pane>
</el-tabs>
<ul class="news-list">
<li class="news-item" v-for="news in newsList" :key="news.id">
<span class="title">{{
locale === "zh" ? news.title : locale === "ru" ? news.titleRu : null
}}</span>
<span class="time">
{{ news.create_time }}
</span>
</li>
</ul>
</div>
<div class="news-list"> <!-- <div class="news-list">
<div class="news-item" v-for="item in newsList"> <div class="news-item" v-for="item in newsList">
<img class="news-cover" alt="cover" :src="`${file_base_url}/${item.cover}`"/> <img
class="news-cover"
alt="cover"
:src="`${file_base_url}/${item.cover}`"
/>
<p class="news-content"> <p class="news-content">
{{ item.content }} {{ item.content }}
</p> </p>
</div> </div>
</div> </div>
-->
<!-- <pagination :total="total"/>--> <!-- <pagination :total="total"/>-->
</div> </div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.app-container { .news-container {
padding: 20px;
display: flex; display: flex;
flex-direction: column; .left {
flex: 4;
.news-list { height: 100%;
align-items: start; // display: flex;
//flex: 1; // flex-direction: column;
//display: grid; // justify-content: center;
//grid-template-columns: repeat(2, minmax(0, 1fr)); .cover-image {
//grid-template-rows: repeat(2, minmax(0, 1fr)); width: 100%;
//gap: 16px; aspect-ratio: 4/3;
//padding: 12px; object-fit: cover;
display: flex; }
flex-wrap: wrap; .title {
align-content: flex-start; text-align: center;
height: calc(100vh - 240px); font-size: 20px;
font-weight: bold;
.news-item { margin-top: 12px;
display: flex; margin-bottom: 0;
justify-content: space-between; }
padding: 12px; }
width: 50%; .right {
height: 50%; flex: 4;
margin-left: 12px;
.news-cover { height: 100%;
flex: 2; padding: 12px;
width: 80%; .news-list {
height: 100%; .news-item {
object-fit: cover; list-style: disc;
} height: 40px;
display: flex;
.news-content { align-items: center;
overflow-y: hidden; cursor: pointer;
flex: 3;
margin-left: 16px;
} }
} }
} }
} }
</style> </style>

View File

@ -2,33 +2,33 @@
<div ref="fullPageRef" v-loading="loading" class="fullPage"> <div ref="fullPageRef" v-loading="loading" class="fullPage">
<div class="indicator"> <div class="indicator">
<div <div
v-for="idx in 7" v-for="idx in 7"
:id="idx.toString()" :id="idx.toString()"
:key="idx" :key="idx"
:class="`${indicatorActiveIndex === idx ? 'active' : ''}`" :class="`${indicatorActiveIndex === idx ? 'active' : ''}`"
class="point" class="point"
@click="handleIndicatorClick(idx)" @click="handleIndicatorClick(idx)"
></div> ></div>
</div> </div>
<div <div
ref="fullPageContainerRef" ref="fullPageContainerRef"
:data-index="state.fullpage.current" :data-index="state.fullpage.current"
class="fullPageContainer" class="fullPageContainer"
@mousewheel="mouseWheelHandle" @mousewheel="mouseWheelHandle"
> >
<!-- @DOMMouseScroll="mouseWheelHandle" --> <!-- @DOMMouseScroll="mouseWheelHandle" -->
<div <div
v-for="(item, $index) in state.boxList" v-for="(item, $index) in state.boxList"
:key="$index" :key="$index"
:style="`z-index: ${item.zIndex};`" :style="`z-index: ${item.zIndex};`"
class="section" class="section"
> >
<!-- v-if="`index${state.fullpage.current}` == item.title" --> <!-- v-if="`index${state.fullpage.current}` == item.title" -->
<component <component
:is="item.comp" :is="item.comp"
v-if="Math.abs(state.fullpage.current - ($index + 1)) <= 1" v-if="Math.abs(state.fullpage.current - ($index + 1)) <= 1"
:map-index="mapIndex" :map-index="mapIndex"
@changeMapIndex="mapIndex = $event" @changeMapIndex="mapIndex = $event"
></component> ></component>
</div> </div>
</div> </div>
@ -52,7 +52,7 @@
</template> </template>
<script setup> <script setup>
import {computed, onMounted, reactive, ref, shallowRef} from "vue"; import { computed, onMounted, reactive, ref, shallowRef } from "vue";
import index0 from "./comp/index0.vue"; import index0 from "./comp/index0.vue";
import index1 from "./comp/index1.vue"; import index1 from "./comp/index1.vue";
import index8 from "./comp/index8.vue"; import index8 from "./comp/index8.vue";
@ -68,8 +68,8 @@ const mapIndex = ref(0); // 0-3
const mapRef = ref(); const mapRef = ref();
onMounted(() => { onMounted(() => {
fullPageContainerRef.value.addEventListener( fullPageContainerRef.value.addEventListener(
"DOMMouseScroll", "DOMMouseScroll",
mouseWheelHandle mouseWheelHandle
); );
}); });
// onUnmounted(() => { // onUnmounted(() => {
@ -180,7 +180,7 @@ const indicatorActiveIndex = computed(() => {
if (state.fullpage.current === 1) { if (state.fullpage.current === 1) {
return 1; return 1;
} else if (state.fullpage.current === 2) { } else if (state.fullpage.current === 2) {
return 2 return 2;
} else if (state.fullpage.current === 3) { } else if (state.fullpage.current === 3) {
return mapIndex.value + 3; return mapIndex.value + 3;
} else { } else {

View File

@ -32,8 +32,8 @@ export default defineConfig(({mode, command}) => {
// https://cn.vitejs.dev/config/#server-proxy // https://cn.vitejs.dev/config/#server-proxy
"/dev-api": { "/dev-api": {
// target: "http://101.34.131.16:1618", // target: "http://101.34.131.16:1618",
// target: "http://129.211.170.150/api", target: "http://129.211.170.150/api",
target: "http://192.168.0.200:1619", // target: "http://192.168.0.200:1619",
// target: 'http://172.18.3.127:1618', // target: 'http://172.18.3.127:1618',
changeOrigin: true, changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api/, ""), rewrite: (p) => p.replace(/^\/dev-api/, ""),