<template>
|
<page>
|
<div class="page">
|
<div class="page-select">
|
<el-select v-model="currentLocale" placeholder="Language" style="width: 120px">
|
<el-option v-for="item in availableLocales" :key="item.value" :label="t(item.label)"
|
:value="item.value" />
|
</el-select>
|
</div>
|
<div class="page-main">
|
<ul class="page-title">
|
<li class="zylogo"><img src="../../assets/images/home/zylogo.png" alt=""></li>
|
<li class="separator"></li>
|
<li class="sylogo"><img src="../../assets/images/home/sylogo.svg" alt=""></li>
|
<li class="title-text">{{ t('message.logoTitle') }}</li>
|
</ul>
|
<div class="page-content">
|
<div class="page-content-name">{{ t('message.aiTitle') }}</div>
|
<div class="page-content-text">{{ t('message.aiText') }}</div>
|
</div>
|
<div class="page-search">
|
<div class="search-data">
|
<div class="left-See" @click="gotoPage()">{{ t('message.SeeMore') }} ></div>
|
<div class="left-data">121M</div>
|
<div class="left-text">{{ t('message.Compounds') }}</div>
|
</div>
|
<div class="search-main">
|
<div class="searchTop">
|
<div class="searchInputBox">
|
<input v-model="pageData.searchText" type="text" placeholder="" />
|
<el-icon v-if="pageData.searchText != ''" class="clear-icon" @click="clearInput">
|
<CloseBold />
|
</el-icon>
|
<el-button color="#01644c" :icon="Search" class="search-btn" round
|
@click="gotoPage()"></el-button>
|
</div>
|
<ul class="searchExample">
|
<li class="example">{{ t('message.Example') }}:</li>
|
<li class="example-item" @click="gotoList(pageData.example)">{{ pageData.example }}
|
</li>
|
</ul>
|
</div>
|
<div class="searchBottom">
|
<div class="ailogo"><img src="../../assets/images/home/AI_logo.png" alt="">
|
<div>
|
{{ t('message.LookAi') }}
|
</div>
|
</div>
|
<div class="tryinto" @click="goAi()">
|
<div> {{ t('message.Tryinto') }}</div>
|
<img src="../../assets/images/home/rightArrow.png" alt="">
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</page>
|
</template>
|
|
<script setup lang="ts">
|
|
import { inject, ref, computed, reactive } from 'vue'
|
import { useI18n } from 'vue-i18n';
|
import { Search } from '@element-plus/icons-vue'
|
import type { home } from '@/types/home'
|
import { pathData } from '@/assets/js/config'
|
const { locale, t } = useI18n();
|
const config: any = inject('config')
|
import router from '@/router'
|
const availableLocales = [
|
{ value: 'zh', label: 'langSelector.chinese' },
|
{ value: 'en', label: 'langSelector.english' },
|
];
|
|
const pageData = reactive<home>({
|
searchText: "",
|
example: "aspirin"
|
})
|
|
const clearInput = () => {
|
pageData.searchText = ""
|
}
|
|
const currentLocale = computed({
|
get: () => locale.value,
|
set: (value) => {
|
locale.value = value;
|
// (可选) 将语言偏好保存到 localStorage，以便下次记住用户选择
|
localStorage.setItem('user-locale', value);
|
},
|
});
|
|
const gotoPage = () => {
|
const query = { searchText: pageData.searchText };
|
router.push({ path: pathData.searchList, query })
|
}
|
|
const gotoList = (txt: any) => {
|
pageData.searchText = txt
|
gotoPage()
|
}
|
|
const goAi = () => {
|
router.push({ path: pathData.ai, })
|
}
|
|
|
</script>
|
|
<style lang="less" scoped>
|
.page {
|
height: calc(100vh - 190px);
|
width: 100%;
|
min-width: 1200px;
|
background: url("../../assets/images/home/home_bg.png") no-repeat;
|
background-size: cover;
|
background-position: center center;
|
}
|
|
.page-select {
|
padding-top: 21px;
|
margin-left: 72%;
|
}
|
|
.page-main {
|
width: 60%;
|
margin: 0 auto;
|
}
|
|
.page-title {
|
margin-top: 55px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.zylogo {
|
img {
|
width: 225px;
|
}
|
}
|
|
.separator {
|
list-style: none;
|
width: 20px;
|
height: 20px;
|
margin-right: 15px;
|
position: relative;
|
}
|
|
/* 2. 创建第一个伪元素（'\' 斜杠） */
|
.separator::before {
|
content: '';
|
position: absolute;
|
top: 50%;
|
left: 0;
|
width: 100%;
|
/* 和容器一样宽 */
|
height: 1px;
|
/* 线条粗细 */
|
border-top: 1px dashed #ccc;
|
/* 虚线样式 */
|
transform: translateY(-50%) rotate(45deg);
|
/* 先垂直居中，再旋转45度 */
|
}
|
|
/* 3. 创建第二个伪元素（'/' 斜杠） */
|
.separator::after {
|
content: '';
|
position: absolute;
|
top: 50%;
|
left: 0;
|
width: 100%;
|
/* 和容器一样宽 */
|
height: 1px;
|
/* 线条粗细 */
|
border-top: 1px dashed #ccc;
|
/* 虚线样式 */
|
transform: translateY(-50%) rotate(-45deg);
|
/* 先垂直居中，再反向旋转45度 */
|
}
|
|
.sylogo {
|
padding-right: 18px;
|
border-right: 1px solid #0c73b8;
|
|
img {
|
width: 204px;
|
}
|
}
|
|
.title-text {
|
padding-left: 14px;
|
font-weight: bold;
|
font-size: 20px;
|
}
|
|
.page-content {
|
margin-top: 7.5%;
|
|
.page-content-name {
|
text-align: center;
|
font-family: Inter, Inter;
|
font-weight: bold;
|
font-size: 48px;
|
}
|
|
.page-content-text {
|
text-align: center;
|
margin-top: 24px;
|
}
|
}
|
|
.page-search {
|
margin-top: 7.5%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
|
.search-data {
|
width: 17.8%;
|
height: auto;
|
background-image: url("../../assets/images/home/search-left.png");
|
background-size: cover;
|
background-position: center center;
|
border: 1px dashed #949796;
|
border-radius: 5px;
|
|
|
img {
|
width: 100%;
|
opacity: 0.7;
|
}
|
|
.left-See {
|
text-align: right;
|
padding-right: 10px;
|
margin: 10px 0 49px 0;
|
color: #5AB546;
|
cursor: pointer;
|
}
|
|
.left-data {
|
text-align: center;
|
font-weight: 500;
|
font-size: 33px;
|
color: #000000;
|
}
|
|
.left-text {
|
text-align: center;
|
margin-top: 11px;
|
margin-bottom: 50px;
|
font-family: Inter, Inter;
|
font-weight: 400;
|
font-size: 13px;
|
}
|
}
|
|
.search-main {
|
width: 80.2%;
|
border-radius: 10px;
|
border: 1px solid #136E56;
|
}
|
|
.searchTop {
|
background-color: #fff;
|
padding: 41px 0 0 0;
|
border-radius: 10px 10px 0px 0px;
|
}
|
|
.searchInputBox {
|
height: 57px;
|
width: 91%;
|
margin: 0 auto;
|
color: #DFDFDF;
|
display: flex;
|
align-items: center;
|
border: 1px solid #DFDFDF;
|
border-radius: 500px;
|
overflow: hidden;
|
background-color: white;
|
padding-left: 10px;
|
}
|
|
.search-btn {
|
height: 100%;
|
width: 8.1%;
|
border-radius: 60px;
|
font-size: 28px !important;
|
}
|
|
|
.searchInputBox input {
|
flex: 1;
|
width: 50%;
|
height: 90%;
|
font-family: STSongti-SC-Regular;
|
font-size: 14px;
|
letter-spacing: 0.5px;
|
border: none;
|
outline: none
|
}
|
|
.clear-icon {
|
color: #212121;
|
font-size: 18px !important;
|
margin-right: 5px;
|
cursor: pointer;
|
}
|
|
|
.searchExample {
|
width: 91%;
|
margin: 0 auto;
|
padding: 10px 0;
|
display: flex;
|
|
.example {
|
font-family: Inter, Inter;
|
font-weight: 500;
|
font-size: 14px;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
color: linear-gradient(0deg, #5AB546 0%, #006CB6 100%);
|
}
|
|
.example-item {
|
border-radius: 15px;
|
background-color: #f3f3f3;
|
margin-right: 15px;
|
margin-left: 15px;
|
padding: 2px 5px;
|
cursor: pointer;
|
}
|
}
|
|
|
.searchBottom {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 10px 30px;
|
border-radius: 0 0 10px 10px;
|
background: linear-gradient(90deg, #E8F5F0 0%, #E3F4FF 100%);
|
|
.ailogo {
|
display: flex;
|
align-items: center;
|
height: 32px;
|
|
img {
|
height: 100%;
|
margin-right: 20px;
|
}
|
}
|
|
.tryinto {
|
display: inline-flex;
|
align-items: center;
|
font-weight: bold;
|
font-size: 16px;
|
color: transparent;
|
background: linear-gradient(0deg, #5AB546 0%, #006CB6 100%);
|
background-clip: text;
|
-webkit-background-clip: text;
|
position: relative;
|
line-height: 1.5;
|
cursor: pointer;
|
|
img {
|
padding-left: 10px;
|
height: 15px;
|
}
|
}
|
}
|
}
|
|
|
|
|
.large-icon :deep(.el-icon) {
|
/* 方法 A: 使用 Element Plus 的 CSS 变量 (推荐) */
|
--el-icon-size: 24px;
|
/* 或者你想要的任何尺寸 */
|
|
/* 方法 B: 直接设置字体大小 (同样有效) */
|
/* font-size: 24px; */
|
}
|
|
/* 如果你只想针对这个特定的按钮，可以更精确地选择器 */
|
.search-btn :deep(.el-icon) {
|
--el-icon-size: 24px;
|
}
|
</style>
|
