news
This commit is contained in:
@ -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);
|
||||||
|
@ -20,5 +20,11 @@ const home = {
|
|||||||
memberServiceContent: "Содержание услуг для членов",
|
memberServiceContent: "Содержание услуг для членов",
|
||||||
// 是否确认解绑实验室
|
// 是否确认解绑实验室
|
||||||
unbindLab: "Вы уверены, что хотите отвязать лабораторию?",
|
unbindLab: "Вы уверены, что хотите отвязать лабораторию?",
|
||||||
|
// 新闻动态
|
||||||
|
news: "Новости",
|
||||||
|
// 政策解读
|
||||||
|
policyAnalyzing: "анализ политики",
|
||||||
|
// 通知公告
|
||||||
|
announcement: "объявление"
|
||||||
};
|
};
|
||||||
export default home;
|
export default home;
|
||||||
|
@ -16,6 +16,12 @@ const home = {
|
|||||||
memberServiceContent: "会员服务内容",
|
memberServiceContent: "会员服务内容",
|
||||||
// 是否确认解绑实验室
|
// 是否确认解绑实验室
|
||||||
unbindLab: "是否确认解绑实验室",
|
unbindLab: "是否确认解绑实验室",
|
||||||
|
// 新闻动态
|
||||||
|
news: "新闻动态",
|
||||||
|
// 政策解读
|
||||||
|
policyAnalyzing: "政策解读",
|
||||||
|
// 通知公告
|
||||||
|
announcement: "通知公告"
|
||||||
};
|
};
|
||||||
|
|
||||||
export default home;
|
export default home;
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
|
@ -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>
|
||||||
|
@ -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 {
|
||||||
|
@ -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/, ""),
|
||||||
|
Reference in New Issue
Block a user