update icon
This commit is contained in:
quantulr
7
src/api/website/home/news.js
Normal file
7
src/api/website/home/news.js
Normal file
@ -0,0 +1,7 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
export const listNews = (params) => request({
|
||||
url: "/app/news/list",
|
||||
method: "GET",
|
||||
params
|
||||
});
|
||||
BIN
src/assets/logo/咸海logo.png
Normal file
BIN
src/assets/logo/咸海logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
@ -1,35 +1,36 @@
|
||||
<template>
|
||||
<div class="webHead">
|
||||
<div class="site-title">
|
||||
{{t('common.siteTitle')}}
|
||||
<img class="site-logo" :src="sitelogo"/>
|
||||
<span>{{ t('common.siteTitle') }}</span>
|
||||
</div>
|
||||
<el-row style="height: 80px">
|
||||
<el-col :span="16">
|
||||
<ul class="menu">
|
||||
<li class="menu-item1">
|
||||
<div
|
||||
class="menu-item-tit"
|
||||
:class="pagePath == '/' ? 'active' : ''"
|
||||
@click="handlePath('/')"
|
||||
class="menu-item-tit"
|
||||
:class="pagePath == '/' ? 'active' : ''"
|
||||
@click="handlePath('/')"
|
||||
>
|
||||
{{ t("headerMenu.home") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-item1 solution">
|
||||
<div
|
||||
class="menu-item-tit"
|
||||
:class="pagePath.indexOf('/solution/') != -1 ? 'active' : ''"
|
||||
class="menu-item-tit"
|
||||
:class="pagePath.indexOf('/solution/') != -1 ? 'active' : ''"
|
||||
>
|
||||
{{ t("headerMenu.resolution") }}
|
||||
</div>
|
||||
<div class="show_box">
|
||||
<div
|
||||
v-for="item in categoryList"
|
||||
class="pointer"
|
||||
:class="
|
||||
v-for="item in categoryList"
|
||||
class="pointer"
|
||||
:class="
|
||||
pagePath == `/solution/${item.id}` ? 'x_blue _active' : ''
|
||||
"
|
||||
@click="
|
||||
@click="
|
||||
handlePath(
|
||||
`/solution/${item.id}?name=${item[solutionNameField]}`
|
||||
)
|
||||
@ -77,37 +78,37 @@
|
||||
</li>
|
||||
<li class="menu-item1">
|
||||
<div
|
||||
class="menu-item-tit"
|
||||
:class="pagePath == '/innovate' ? 'active' : ''"
|
||||
@click="handlePath('/innovate')"
|
||||
class="menu-item-tit"
|
||||
:class="pagePath == '/innovate' ? 'active' : ''"
|
||||
@click="handlePath('/innovate')"
|
||||
>
|
||||
{{ t("headerMenu.innovation") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-item1">
|
||||
<div
|
||||
class="menu-item-tit"
|
||||
:class="pagePath == '/activity' ? 'active' : ''"
|
||||
@click="handlePath('/activity')"
|
||||
class="menu-item-tit"
|
||||
:class="pagePath == '/activity' ? 'active' : ''"
|
||||
@click="handlePath('/activity')"
|
||||
>
|
||||
{{ t("headerMenu.activity") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-item1">
|
||||
<div
|
||||
class="menu-item-tit"
|
||||
:class="pagePath == '/about' ? 'active' : ''"
|
||||
@click="handlePath('/about')"
|
||||
class="menu-item-tit"
|
||||
:class="pagePath == '/about' ? 'active' : ''"
|
||||
@click="handlePath('/about')"
|
||||
>
|
||||
{{ t("headerMenu.aboutUs") }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-item1 profile-menu-group" style="display: flex">
|
||||
<div
|
||||
v-if="!userStore.token"
|
||||
class="menu-item-tit"
|
||||
:class="pagePath == '/login' ? 'active' : ''"
|
||||
@click="handlePath('/login')"
|
||||
v-if="!userStore.token"
|
||||
class="menu-item-tit"
|
||||
:class="pagePath == '/login' ? 'active' : ''"
|
||||
@click="handlePath('/login')"
|
||||
>
|
||||
{{ t("headerMenu.loginRegister") }}
|
||||
</div>
|
||||
@ -122,30 +123,30 @@
|
||||
<!-- <template #reference> -->
|
||||
<div v-else class="avatar-wrapper">
|
||||
<img
|
||||
:src="
|
||||
:src="
|
||||
userStore.avatar
|
||||
? `${baseUrl}/file${userStore.avatar}`
|
||||
: defaultAvatar
|
||||
"
|
||||
class="user-avatar"
|
||||
class="user-avatar"
|
||||
/>
|
||||
<i class="el-icon-caret-bottom" />
|
||||
<i class="el-icon-caret-bottom"/>
|
||||
</div>
|
||||
<!-- </template> -->
|
||||
<!-- </el-popover> -->
|
||||
<div
|
||||
v-if="userStore.token"
|
||||
class="menu-item-tit"
|
||||
:class="pagePath == '/login' ? 'active' : ''"
|
||||
@click="handlePage"
|
||||
v-if="userStore.token"
|
||||
class="menu-item-tit"
|
||||
:class="pagePath == '/login' ? 'active' : ''"
|
||||
@click="handlePage"
|
||||
>
|
||||
{{ t("headerMenu.personalCenter") }}
|
||||
</div>
|
||||
<div
|
||||
v-if="userStore.token"
|
||||
class="menu-item-tit"
|
||||
:class="pagePath == '/login' ? 'active' : ''"
|
||||
@click="logout"
|
||||
v-if="userStore.token"
|
||||
class="menu-item-tit"
|
||||
:class="pagePath == '/login' ? 'active' : ''"
|
||||
@click="logout"
|
||||
>
|
||||
{{ t("headerMenu.logout") }}
|
||||
</div>
|
||||
@ -185,15 +186,16 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import {computed, reactive, ref, watch} from "vue";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
|
||||
import useUserStore from "@/store/modules/user";
|
||||
import { getCategory } from "@/api/website/solution";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import {getCategory} from "@/api/website/solution";
|
||||
import {useI18n} from "vue-i18n";
|
||||
import useSettingsStore from "@/store/modules/settings";
|
||||
import defaultAvatar from "@/assets/logo/avatar.png";
|
||||
import modal from "@/plugins/modal";
|
||||
import sitelogo from "@/assets/logo/咸海logo.png"
|
||||
|
||||
const userStore = useUserStore();
|
||||
let state = reactive({});
|
||||
@ -203,22 +205,22 @@ const router = useRouter();
|
||||
const baseUrl = ref(import.meta.env.VITE_APP_BASE_API);
|
||||
const categoryList = ref([]);
|
||||
// 当前的语言
|
||||
const { locale, t } = useI18n();
|
||||
const {locale, t} = useI18n();
|
||||
|
||||
const solutionNameField = computed(() => {
|
||||
return locale.value === "zh" ? "name" : `${locale.value}Name`;
|
||||
});
|
||||
const settingsStore = useSettingsStore();
|
||||
const loadCategoryList = async () => {
|
||||
const { data } = await getCategory();
|
||||
const {data} = await getCategory();
|
||||
categoryList.value = data;
|
||||
};
|
||||
loadCategoryList();
|
||||
watch(
|
||||
() => route.path,
|
||||
(newVal, oldVal) => {
|
||||
pagePath.value = newVal;
|
||||
}
|
||||
() => route.path,
|
||||
(newVal, oldVal) => {
|
||||
pagePath.value = newVal;
|
||||
}
|
||||
);
|
||||
pagePath.value = route.path;
|
||||
|
||||
@ -242,7 +244,7 @@ function handlePage() {
|
||||
// routeData = router.resolve({ path: "/identity/index" });
|
||||
// }
|
||||
// window.open(routeData.href, "_blank");
|
||||
const routeData = router.resolve({ path: "/identity/index" });
|
||||
const routeData = router.resolve({path: "/identity/index"});
|
||||
window.open(routeData.href, "_blank");
|
||||
}
|
||||
|
||||
@ -260,15 +262,16 @@ function handlePath(path) {
|
||||
|
||||
function logout() {
|
||||
modal
|
||||
.confirm(t("common.areYouSureYouWantToLogOutAndExitTheSystem"))
|
||||
.then(() => {
|
||||
useUserStore()
|
||||
.logOut()
|
||||
.then(() => {
|
||||
location.href = "/";
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
.confirm(t("common.areYouSureYouWantToLogOutAndExitTheSystem"))
|
||||
.then(() => {
|
||||
useUserStore()
|
||||
.logOut()
|
||||
.then(() => {
|
||||
location.href = "/";
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -368,7 +371,7 @@ dt {
|
||||
}
|
||||
|
||||
.profile-menu-group {
|
||||
height: 71px;
|
||||
height: 75px;
|
||||
flex: 2;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -394,7 +397,7 @@ dt {
|
||||
}
|
||||
|
||||
.webHead {
|
||||
.site-title{
|
||||
.site-title {
|
||||
height: 80px;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
@ -402,7 +405,15 @@ dt {
|
||||
font-size: 24px;
|
||||
margin-left: 32px;
|
||||
font-weight: bold;
|
||||
|
||||
.site-logo {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
object-fit: cover;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.switch-locale {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import { computed, onMounted, ref, shallowRef, toRefs, watch } from "vue";
|
||||
import { init, registerMap } from "echarts";
|
||||
import {computed, onMounted, ref, shallowRef, toRefs, watch} from "vue";
|
||||
import {init, registerMap} from "echarts";
|
||||
import {
|
||||
countAchievementByArea,
|
||||
countAchievementByCity,
|
||||
@ -23,11 +23,11 @@ import backBtnPng from "@/assets/images/map_back.png";
|
||||
import RegionPagine from "@/views/website/home/comp/RegionPagine.vue";
|
||||
import html2canvas from "html2canvas";
|
||||
import anime from "animejs";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import {useI18n} from "vue-i18n";
|
||||
import geoJSONRU from "@/assets/world.json";
|
||||
import { countryOptions } from "@/utils/parameter";
|
||||
import {countryOptions} from "@/utils/parameter";
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
const {t, locale} = useI18n();
|
||||
const leftBoxPageNum = ref(1);
|
||||
const rightBoxPageNum = ref(1);
|
||||
const mapRef = ref(null);
|
||||
@ -41,7 +41,7 @@ const props = defineProps({
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
const { mapIndex } = toRefs(props);
|
||||
const {mapIndex} = toRefs(props);
|
||||
const emit = defineEmits(["changeMapIndex"]);
|
||||
const methods = [
|
||||
{
|
||||
@ -83,16 +83,16 @@ const methods = [
|
||||
const areaCount = ref([]); // 按行政区划统计
|
||||
const industryCount = ref([]); // 按领域统计
|
||||
const areaCountPaged = computed(() =>
|
||||
areaCount.value.slice(
|
||||
(leftBoxPageNum.value - 1) * 5,
|
||||
leftBoxPageNum.value * 5
|
||||
)
|
||||
areaCount.value.slice(
|
||||
(leftBoxPageNum.value - 1) * 5,
|
||||
leftBoxPageNum.value * 5
|
||||
)
|
||||
);
|
||||
const industryCountPaged = computed(() =>
|
||||
industryCount.value.slice(
|
||||
(rightBoxPageNum.value - 1) * 5,
|
||||
rightBoxPageNum.value * 5
|
||||
)
|
||||
industryCount.value.slice(
|
||||
(rightBoxPageNum.value - 1) * 5,
|
||||
rightBoxPageNum.value * 5
|
||||
)
|
||||
);
|
||||
const options = {
|
||||
// nameProperty: 'adcode',
|
||||
@ -103,10 +103,10 @@ const options = {
|
||||
orient: "horizontal", //图例排列方向
|
||||
padding: 5,
|
||||
pieces: [
|
||||
{ gte: 0, lte: 99, label: "99", color: "#CAE9FD" },
|
||||
{ gte: 100, lte: 299, label: "100-299", color: "#7ED2F7" },
|
||||
{ gte: 300, lte: 499, label: "299-499", color: "#039DDD" },
|
||||
{ gte: 500, label: "500", color: "#0D4884" },
|
||||
{gte: 0, lte: 99, label: "99", color: "#CAE9FD"},
|
||||
{gte: 100, lte: 299, label: "100-299", color: "#7ED2F7"},
|
||||
{gte: 300, lte: 499, label: "299-499", color: "#039DDD"},
|
||||
{gte: 500, label: "500", color: "#0D4884"},
|
||||
],
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
@ -200,11 +200,11 @@ const loadChinaDistrict = (adcode) => {
|
||||
adcode: areaProp.adcode,
|
||||
name: areaProp.name,
|
||||
value:
|
||||
result.count.find((el) => el.code == areaProp.adcode)?.count ?? 0,
|
||||
result.count.find((el) => el.code == areaProp.adcode)?.count ?? 0,
|
||||
};
|
||||
});
|
||||
|
||||
registerMap("map", { geoJSON, specialAreas: {} });
|
||||
registerMap("map", {geoJSON, specialAreas: {}});
|
||||
options.series[0].data = mapData.value;
|
||||
myEcharts.value.setOption(options);
|
||||
loading.value = false;
|
||||
@ -220,39 +220,39 @@ const loadI18nDistrict = async () => {
|
||||
value: 0,
|
||||
};
|
||||
});
|
||||
registerMap("map", { geoJSON: geoJSONRU, specialAreas: {} });
|
||||
registerMap("map", {geoJSON: geoJSONRU, specialAreas: {}});
|
||||
myEcharts.value.setOption(options);
|
||||
let result;
|
||||
try {
|
||||
result = await methods[mapIndex.value]["method"]();
|
||||
} catch (e) {
|
||||
result = { data: {} };
|
||||
result = {data: {}};
|
||||
}
|
||||
areaCount.value =
|
||||
result?.data?.count?.map((el) => {
|
||||
return {
|
||||
name: countryOptions.find((ct) => el.country === ct.key)?.[
|
||||
locale.value
|
||||
],
|
||||
count: el.count,
|
||||
};
|
||||
}) ?? [];
|
||||
result?.data?.count?.map((el) => {
|
||||
return {
|
||||
name: countryOptions.find((ct) => el.country === ct.key)?.[
|
||||
locale.value
|
||||
],
|
||||
count: el.count,
|
||||
};
|
||||
}) ?? [];
|
||||
industryCount.value = Object.keys(result.data?.industry ?? {}).map(
|
||||
(key) => ({
|
||||
name: key,
|
||||
count: result.data.industry[key],
|
||||
})
|
||||
(key) => ({
|
||||
name: key,
|
||||
count: result.data.industry[key],
|
||||
})
|
||||
);
|
||||
mapData.value = geoJSONRU.features.map((el) => {
|
||||
const areaProp = el.properties;
|
||||
return {
|
||||
name: areaProp.name,
|
||||
value:
|
||||
result.data?.count?.find(
|
||||
(el) =>
|
||||
countryOptions.find((ct) => ct.key === el.country)?.en ===
|
||||
areaProp.name
|
||||
)?.count ?? 0,
|
||||
result.data?.count?.find(
|
||||
(el) =>
|
||||
countryOptions.find((ct) => ct.key === el.country)?.en ===
|
||||
areaProp.name
|
||||
)?.count ?? 0,
|
||||
};
|
||||
});
|
||||
options.series[0].data = mapData.value;
|
||||
@ -343,8 +343,8 @@ const handleScroll = async (ev) => {
|
||||
let direction = ev.deltaY > 0 ? "down" : "up";
|
||||
// 判断滚轮滚动方向
|
||||
if (
|
||||
(direction === "down" && mapIndex.value >= methods.length - 1) ||
|
||||
(direction === "up" && mapIndex.value <= 0)
|
||||
(direction === "down" && mapIndex.value >= methods.length - 1) ||
|
||||
(direction === "up" && mapIndex.value <= 0)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
@ -354,7 +354,8 @@ const handleScroll = async (ev) => {
|
||||
return;
|
||||
}
|
||||
isScrolling.value = true;
|
||||
playScrollAnimation(direction, () => {});
|
||||
playScrollAnimation(direction, () => {
|
||||
});
|
||||
if (direction === "down" && mapIndex.value < methods.length - 1) {
|
||||
emit("changeMapIndex", mapIndex.value + 1);
|
||||
} else if (direction === "up" && mapIndex.value > 0) {
|
||||
@ -369,7 +370,8 @@ watch(mapIndex, (newVal, oldVal) => {
|
||||
}
|
||||
isScrolling.value = true;
|
||||
const direction = newVal > oldVal ? "down" : "up";
|
||||
playScrollAnimation(direction, () => {});
|
||||
playScrollAnimation(direction, () => {
|
||||
});
|
||||
// if (locale.value === "zh") {
|
||||
// loadChinaDistrict("100000");
|
||||
// } else {
|
||||
@ -408,9 +410,9 @@ watch(mapIndex, (newVal, oldVal) => {
|
||||
</div>
|
||||
<div class="body">
|
||||
<div
|
||||
v-if="areaCountPaged.length === 0"
|
||||
class="tr"
|
||||
style="
|
||||
v-if="areaCountPaged.length === 0"
|
||||
class="tr"
|
||||
style="
|
||||
height: 36px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -426,8 +428,8 @@ watch(mapIndex, (newVal, oldVal) => {
|
||||
</div>
|
||||
</div>
|
||||
<RegionPagine
|
||||
v-model:page="leftBoxPageNum"
|
||||
:total="areaCount.length"
|
||||
v-model:page="leftBoxPageNum"
|
||||
:total="areaCount.length"
|
||||
/>
|
||||
</div>
|
||||
<!-- 领域 -->
|
||||
@ -441,9 +443,9 @@ watch(mapIndex, (newVal, oldVal) => {
|
||||
</div>
|
||||
<div class="body">
|
||||
<div
|
||||
v-if="industryCountPaged.length === 0"
|
||||
class="tr"
|
||||
style="
|
||||
v-if="industryCountPaged.length === 0"
|
||||
class="tr"
|
||||
style="
|
||||
height: 36px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -453,9 +455,9 @@ watch(mapIndex, (newVal, oldVal) => {
|
||||
{{ t("map.noData") }}
|
||||
</div>
|
||||
<div
|
||||
v-for="item in industryCountPaged"
|
||||
:key="item.adcode"
|
||||
class="tr"
|
||||
v-for="item in industryCountPaged"
|
||||
:key="item.adcode"
|
||||
class="tr"
|
||||
>
|
||||
<div class="title">{{ item.name }}</div>
|
||||
<div class="count">{{ item.count }}</div>
|
||||
@ -463,14 +465,14 @@ watch(mapIndex, (newVal, oldVal) => {
|
||||
</div>
|
||||
</div>
|
||||
<RegionPagine
|
||||
v-model:page="rightBoxPageNum"
|
||||
:total="industryCount.length"
|
||||
v-model:page="rightBoxPageNum"
|
||||
:total="industryCount.length"
|
||||
/>
|
||||
</div>
|
||||
<div id="map-container" ref="mapRef"></div>
|
||||
<div
|
||||
id="container"
|
||||
style="
|
||||
id="container"
|
||||
style="
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgb(0, 0, 0);
|
||||
@ -523,7 +525,7 @@ watch(mapIndex, (newVal, oldVal) => {
|
||||
|
||||
> .title {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
top: 16px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
@ -565,7 +567,8 @@ watch(mapIndex, (newVal, oldVal) => {
|
||||
.th {
|
||||
display: flex;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
|
||||
.title,
|
||||
.count {
|
||||
width: 60px;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div
|
||||
class="box"
|
||||
style="background-size: cover; background-color: #fff"
|
||||
:style="{ backgroundImage: state.banner ? `url(${state.banner})` : '' }"
|
||||
class="box"
|
||||
style="background-size: cover; background-color: #fff"
|
||||
:style="{ backgroundImage: state.banner ? `url(${state.banner})` : '' }"
|
||||
>
|
||||
<div>
|
||||
<el-row>
|
||||
@ -10,9 +10,9 @@
|
||||
<el-col :push="4" :md="20">
|
||||
<div class="tab">
|
||||
<div
|
||||
v-for="(v, index) in state.tabList"
|
||||
:class="{ active: state.tabIndex == index }"
|
||||
@click="switchTab(index)"
|
||||
v-for="(v, index) in state.tabList"
|
||||
:class="{ active: state.tabIndex == index }"
|
||||
@click="switchTab(index)"
|
||||
>
|
||||
<!-- :style="v === '找实验室' ? `display:none` : ''" -->
|
||||
{{ t(`webSearch.${v}`) }}
|
||||
@ -22,18 +22,18 @@
|
||||
</el-row>
|
||||
<div style="height: 16px"></div>
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
:rules="queryRules"
|
||||
ref="queryRef"
|
||||
@submit.prevent
|
||||
:model="queryParams"
|
||||
:rules="queryRules"
|
||||
ref="queryRef"
|
||||
@submit.prevent
|
||||
>
|
||||
<el-row>
|
||||
<el-col :push="4" :sm="10" :md="12">
|
||||
<el-form-item prop="keyword">
|
||||
<el-input
|
||||
v-model.trim="queryParams.keyword"
|
||||
:placeholder="t('webSearch.placeholder')"
|
||||
@keyup.enter="handleQuery"
|
||||
v-model.trim="queryParams.keyword"
|
||||
:placeholder="t('webSearch.placeholder')"
|
||||
@keyup.enter="handleQuery"
|
||||
>
|
||||
<!-- <template #suffix v-if="false">-->
|
||||
<!-- <el-form-item prop="queryType">-->
|
||||
@ -57,11 +57,11 @@
|
||||
<el-col :push="4" :sm="10" :md="8">
|
||||
<div class="btnsWrap">
|
||||
<el-button
|
||||
class="x_btns"
|
||||
type="primary"
|
||||
icon="Search"
|
||||
@click="handleQuery"
|
||||
>{{ t("webSearch.search") }}
|
||||
class="x_btns"
|
||||
type="primary"
|
||||
icon="Search"
|
||||
@click="handleQuery"
|
||||
>{{ t("webSearch.search") }}
|
||||
</el-button>
|
||||
<!-- <el-button class="x_btns" @click="handleQuery"
|
||||
>{{ t("admin.table.publishDemand") }}</el-button
|
||||
@ -81,6 +81,10 @@
|
||||
<div class="val">{{ state.data.patent_count }}</div>
|
||||
<div class="des">{{ t("quantityOverview.patent") }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="val">{{ state.data.achievement_count }}</div>
|
||||
<div class="des">{{ t("quantityOverview.achievement") }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="val">{{ state.data.expert_count }}</div>
|
||||
<div class="des">
|
||||
@ -116,14 +120,14 @@
|
||||
|
||||
<script setup>
|
||||
// TODO:成果搜索添加按成果介绍搜索，需求搜索添加按需求描述搜索,添加实验室搜索
|
||||
import { computed, onMounted, reactive, ref } from "vue";
|
||||
import { banner, getAllCount } from "@/api/website/home";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import {computed, onMounted, reactive, ref} from "vue";
|
||||
import {banner, getAllCount} from "@/api/website/home";
|
||||
import {useRouter} from "vue-router";
|
||||
import {useI18n} from "vue-i18n";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const { t } = useI18n();
|
||||
const {t} = useI18n();
|
||||
const testEnter = (ev) => {
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
@ -157,16 +161,16 @@ const handleDetail = async (mode, keyword, queryType) => {
|
||||
await queryRef.value.validate();
|
||||
const routeData = router.resolve({
|
||||
path: `/searchList/${mode}`,
|
||||
query: { keyword, queryType },
|
||||
query: {keyword, queryType},
|
||||
});
|
||||
void router.push(routeData);
|
||||
};
|
||||
|
||||
function handleQuery() {
|
||||
handleDetail(
|
||||
searchTypeList.value[state.tabIndex],
|
||||
queryParams.keyword,
|
||||
queryParams.queryType
|
||||
searchTypeList.value[state.tabIndex],
|
||||
queryParams.keyword,
|
||||
queryParams.queryType
|
||||
);
|
||||
}
|
||||
|
||||
@ -199,7 +203,7 @@ const switchTab = (index) => {
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
banner({ locals: "首页背景" }).then((resp) => {
|
||||
banner({locals: "首页背景"}).then((resp) => {
|
||||
state.banner = resp.data[0].images;
|
||||
});
|
||||
|
||||
|
||||
91
src/views/website/home/comp/index9.vue
Normal file
91
src/views/website/home/comp/index9.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<script setup>
|
||||
import {reactive, ref, toRefs} from "vue";
|
||||
import {listNews} from "@/api/website/home/news";
|
||||
import Pagination from "@/components/Pagination/index.vue";
|
||||
|
||||
const file_base_url = `${import.meta.env.VITE_APP_BASE_API}/file`
|
||||
const total = ref(0)
|
||||
const newsList = ref([])
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 4,
|
||||
classification: "0"
|
||||
}
|
||||
})
|
||||
|
||||
const {queryParams} = toRefs(data)
|
||||
const getList = () => {
|
||||
listNews(queryParams.value).then(resp => {
|
||||
newsList.value = resp.rows
|
||||
total.value = resp.total
|
||||
})
|
||||
}
|
||||
const handleTabChange = (tab) => {
|
||||
queryParams.value.classification = tab
|
||||
getList()
|
||||
}
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-container" style="height: 100%">
|
||||
<el-tabs @tab-change="handleTabChange" v-model="queryParams.classification">
|
||||
<el-tab-pane name="0" label="新闻"></el-tab-pane>
|
||||
<el-tab-pane name="1" label="政策"></el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<div class="news-list">
|
||||
<div class="news-item" v-for="item in newsList">
|
||||
<img class="news-cover" alt="cover" :src="`${file_base_url}/${item.cover}`"/>
|
||||
|
||||
<p class="news-content">
|
||||
{{ item.content }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <pagination :total="total"/>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.news-list {
|
||||
align-items: start;
|
||||
//flex: 1;
|
||||
//display: grid;
|
||||
//grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
//grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
//gap: 16px;
|
||||
//padding: 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
height: calc(100vh - 240px);
|
||||
|
||||
.news-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
|
||||
.news-cover {
|
||||
flex: 2;
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.news-content {
|
||||
overflow-y: hidden;
|
||||
flex: 3;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,33 +2,33 @@
|
||||
<div ref="fullPageRef" v-loading="loading" class="fullPage">
|
||||
<div class="indicator">
|
||||
<div
|
||||
v-for="idx in 6"
|
||||
:id="idx.toString()"
|
||||
:key="idx"
|
||||
:class="`${indicatorActiveIndex == idx ? 'active' : ''}`"
|
||||
class="point"
|
||||
@click="handleIndicatorClick(idx)"
|
||||
v-for="idx in 7"
|
||||
:id="idx.toString()"
|
||||
:key="idx"
|
||||
:class="`${indicatorActiveIndex === idx ? 'active' : ''}`"
|
||||
class="point"
|
||||
@click="handleIndicatorClick(idx)"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
ref="fullPageContainerRef"
|
||||
:data-index="state.fullpage.current"
|
||||
class="fullPageContainer"
|
||||
@mousewheel="mouseWheelHandle"
|
||||
ref="fullPageContainerRef"
|
||||
:data-index="state.fullpage.current"
|
||||
class="fullPageContainer"
|
||||
@mousewheel="mouseWheelHandle"
|
||||
>
|
||||
<!-- @DOMMouseScroll="mouseWheelHandle" -->
|
||||
<div
|
||||
v-for="(item, $index) in state.boxList"
|
||||
:key="$index"
|
||||
:style="`z-index: ${item.zIndex};`"
|
||||
class="section"
|
||||
v-for="(item, $index) in state.boxList"
|
||||
:key="$index"
|
||||
:style="`z-index: ${item.zIndex};`"
|
||||
class="section"
|
||||
>
|
||||
<!-- v-if="`index${state.fullpage.current}` == item.title" -->
|
||||
<component
|
||||
:is="item.comp"
|
||||
v-if="Math.abs(state.fullpage.current - ($index + 1)) <= 1"
|
||||
:map-index="mapIndex"
|
||||
@changeMapIndex="mapIndex = $event"
|
||||
:is="item.comp"
|
||||
v-if="Math.abs(state.fullpage.current - ($index + 1)) <= 1"
|
||||
:map-index="mapIndex"
|
||||
@changeMapIndex="mapIndex = $event"
|
||||
></component>
|
||||
</div>
|
||||
</div>
|
||||
@ -52,10 +52,11 @@
|
||||
</template>
|
||||
|
||||
<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 index1 from "./comp/index1.vue";
|
||||
import index8 from "./comp/index8.vue";
|
||||
import index9 from "@/views/website/home/comp/index9.vue";
|
||||
|
||||
const loading = ref(true);
|
||||
setTimeout(() => {
|
||||
@ -67,8 +68,8 @@ const mapIndex = ref(0); // 0-3
|
||||
const mapRef = ref();
|
||||
onMounted(() => {
|
||||
fullPageContainerRef.value.addEventListener(
|
||||
"DOMMouseScroll",
|
||||
mouseWheelHandle
|
||||
"DOMMouseScroll",
|
||||
mouseWheelHandle
|
||||
);
|
||||
});
|
||||
// onUnmounted(() => {
|
||||
@ -153,6 +154,11 @@ let state = reactive({
|
||||
zIndex: 1,
|
||||
title: "index1",
|
||||
},
|
||||
{
|
||||
comp: shallowRef(index9),
|
||||
zIndex: 1,
|
||||
title: "index9",
|
||||
},
|
||||
{
|
||||
comp: shallowRef(index0),
|
||||
zIndex: 1,
|
||||
@ -174,7 +180,9 @@ const indicatorActiveIndex = computed(() => {
|
||||
if (state.fullpage.current === 1) {
|
||||
return 1;
|
||||
} else if (state.fullpage.current === 2) {
|
||||
return mapIndex.value + 2;
|
||||
return 2
|
||||
} else if (state.fullpage.current === 3) {
|
||||
return mapIndex.value + 3;
|
||||
} else {
|
||||
return state.fullpage.current + 3;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user