wo123/tuanshiwei-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
王创世 2025-07-04 17:00:55 +08:00
parent 6d292944da
commit 45ee64cf47
11 changed files with 166 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/AppAbout.vue
View File

@ -8,7 +8,7 @@
<div class="rightcon" id="aboutid" @scroll="hmScroll"> <div class="rightcon" id="aboutid" @scroll="hmScroll">
<div class="flex top_search "> <div class="flex top_search ">
<div style="width: 350x;"> <div style="width: 350x;">
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%;height: 100%;object-fit: cover;"> <img @click="toMore(0)" :src="`/img/index/dlogo.png`" style="cursor: pointer;;width: 100%;height: 100%;object-fit: cover;">
</div> </div>
<div class="inputform"> <div class="inputform">
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text" <input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text"
@ -46,7 +46,7 @@
style="font-weight: bold;font-size: 32px;color: #393939;text-align: center;padding: 25px 0px 25px 0;">{{ info.title }}</div> style="font-weight: bold;font-size: 32px;color: #393939;text-align: center;padding: 25px 0px 25px 0;">{{ info.title }}</div>
<div style="width: 100%;height: 3px;border-top: 1px dashed #BBBBBB;"></div> <div style="width: 100%;height: 3px;border-top: 1px dashed #BBBBBB;"></div>
<div <div
style="color: #999999;font-weight: 400;font-size: 16px;line-height: 25px;white-space: pre-line;"> style="color: #999999;font-weight: 400;font-size: 16px;line-height: 25px;white-space: pre-line;margin-top: 30px;">
<div v-html="info.content"></div> <div v-html="info.content"></div>
</div> </div>
</div> </div>
@ -94,17 +94,16 @@ onMounted(() => {
const hmScroll = () => { const hmScroll = () => {
let home = document.getElementById('aboutid'); let home = document.getElementById('aboutid');
if (home.scrollTop + home.clientHeight >= home.scrollHeight) { if (home.scrollTop + home.clientHeight >= home.scrollHeight) {
setTimeout(function () { emit('toSwpe', 3);
emit('toSwpe', 3);
}, 500);
} }
if (home.scrollTop == 0) { if (home.scrollTop == 0) {
setTimeout(function () { emit('toSwpe', 1);
emit('toSwpe', 1);
}, 500);
} }
} }
const emit = defineEmits(['toSwpe']) const emit = defineEmits(['toSwpe'])
const toMore = (index:number) => {
emit('toSwpe', index);
}
//搜索 //搜索
const toSearch = () => { const toSearch = () => {
@ -253,8 +252,8 @@ const getNewstypeList = async () => {
} }
&.active { &.active {
background: linear-gradient(0deg, rgba(51, 140, 222, 0.12) 0%, rgba(61, 146, 224, 0.12) 100%); background: #388FDF;
color: #3A91DF; color: #ffffff;
} }
} }
} }

96
components/AppContactUs.vue
View File

@ -8,7 +8,7 @@
<div class="rightcon" id="contid" @scroll="hmScroll"> <div class="rightcon" id="contid" @scroll="hmScroll">
<div class="flex top_search "> <div class="flex top_search ">
<div style="width: 350px;"> <div style="width: 350px;">
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%;height: 100%;object-fit: cover;"> <img @click="toMore(0)" :src="`/img/index/dlogo.png`" style="cursor: pointer;;width: 100%;height: 100%;object-fit: cover;">
</div> </div>
<!-- <div class="inputform"> <!-- <div class="inputform">
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text" <input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text"
@ -18,27 +18,29 @@
</div> </div>
</div> --> </div> -->
</div> </div>
<div class="flex flex-col w-full h-full left-msg"> <div class=" w-full h-full left-msg">
<div <div
style="z-index: 1;background: #ffffff;padding: 30px;border-radius: 16px;margin-top: 20px;margin-left: 100px;"> style="position: relative;;z-index: 1;background: #ffffff;padding: 30px;border-radius: 16px;margin-top: 20px;margin-left: 100px;">
<div class="liuyanba">团团留言板</div> <img class="to_img" :src="`/img/tt.png`" alt="">
<div class="liuyanba"></div>
<form class="contactForm w-full" @submit.prevent="submitForm"> <form class="contactForm w-full" @submit.prevent="submitForm">
<div class="inputforms"> <div class="inputforms">
<span>姓名</span> <span>姓名</span>
<input v-model="formData.name" <input v-model="formData.name"
class="contactInputs mt-[15px] md:mt-[30px] w-full md:w-[600px]" type="text" class="contactInputs mt-[15px] md:mt-[30px] w-full md:w-[600px]" type="text"
placeholder="输入您的姓名" /> placeholder="请输入您的姓名" />
<span>电话</span> <span>电话</span>
<input v-model="formData.mobile" <input v-model="formData.mobile"
class="contactInputs mt-[15px] md:mt-[30px] w-full md:w-[600px]" class="contactInputs mt-[15px] md:mt-[30px] w-full md:w-[600px]" type="text"
type="text" placeholder="请输入您的联系电话" /> placeholder="请输入电话" />
<span>邮箱</span> <span>问题</span>
<input v-model="formData.emil" <input v-model="formData.question"
class="contactInputs mt-[15px] md:mt-[30px] w-full md:w-[600px]" class="contactInputs mt-[15px] md:mt-[30px] w-full md:w-[600px]" type="text"
type="text" placeholder="请输入您的邮箱" /> placeholder="请输入问题" />
</div> </div>
<div class="relative mt-4 md:mt-8 w-full md:w-[1100px] flex"> <div class="relative mt-4 md:mt-8 w-full md:w-[1100px] flex">
<span style="width: 60px;text-align: right;padding-right: 10px;">描述</span> <span style="font-size: 18px;font-weight: 400;width: 60px;padding-right: 10px;">描述</span>
<textarea v-model="formData.message" id="myTextarea" placeholder="为了更好地帮助您，请尽量提供详细的信息" <textarea v-model="formData.message" id="myTextarea" placeholder="为了更好地帮助您，请尽量提供详细的信息"
rows="5" maxlength="100"></textarea> rows="5" maxlength="100"></textarea>
</div> </div>
@ -52,7 +54,7 @@
<div class="re_tit">精选留言</div> <div class="re_tit">精选留言</div>
<div class="re_col"></div> <div class="re_col"></div>
</div> </div>
<div class="flex justify-between ml-[100px]" style="gap: 20px;"> <div class="re_list_top ml-[100px]" style="gap: 20px;">
<div class="re_list" v-for="item, index in liuyanList"> <div class="re_list" v-for="item, index in liuyanList">
<div style="margin: 30px;"> <div style="margin: 30px;">
<div class="re_list_tit flex" style="width: 100%;"> <div class="re_list_tit flex" style="width: 100%;">
@ -89,7 +91,9 @@
<img :src="`/img/index/hmouse.png`" alt=""> <img :src="`/img/index/hmouse.png`" alt="">
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -100,7 +104,7 @@ const inputSearch = ref('');
const formData = reactive({ const formData = reactive({
name: '', name: '',
mobile: '', mobile: '',
emil: '', question: '',
message: '' message: ''
}) })
const total = ref(0); const total = ref(0);
@ -109,7 +113,7 @@ const liuyanList = ref([]);
const getLiuyanList = async () => { const getLiuyanList = async () => {
const res = await $api.post('/api/home.leave_word/index', const res = await $api.post('/api/home.leave_word/index',
{ {
limit: 2, limit: 4,
page: 1, page: 1,
status: 2, status: 2,
show: 1 show: 1
@ -123,13 +127,14 @@ onMounted(() => {
getLiuyanList(); getLiuyanList();
}) })
const emit = defineEmits(['toSwpe']) const emit = defineEmits(['toSwpe'])
const toMore = (index:number) => {
emit('toSwpe', index);
}
const hmScroll = () => { const hmScroll = () => {
let home = document.getElementById('contid'); let home = document.getElementById('contid');
console.log(home.scrollTop); console.log(home.scrollTop);
if (home.scrollTop == 0) { if (home.scrollTop == 0) {
setTimeout(function () { emit('toSwpe', 6);
emit('toSwpe', 6);
}, 500);
} }
} }
// 表单方法 // 表单方法
@ -147,8 +152,8 @@ const submitForm = () => {
return return
} }
if (!formData.emil) { if (!formData.question) {
alert('请输入您的邮箱') alert('请输入您的问题')
return return
} }
@ -166,7 +171,7 @@ const submitForm = () => {
} }
formData.name = ''; formData.name = '';
formData.mobile = ''; formData.mobile = '';
formData.emil = ''; formData.question = '';
formData.message = ''; formData.message = '';
}) })
.catch((err) => { .catch((err) => {
@ -190,11 +195,6 @@ const submitForm = () => {
background-size: 100% 100%; background-size: 100% 100%;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
.fiximg {
img {
margin-bottom: 20px;
}
}
} }
.top_search { .top_search {
@ -245,7 +245,7 @@ const submitForm = () => {
//------------------------------------------ //------------------------------------------
.liuyanba { .liuyanba {
/* height: 22px; */ /* height: 22px; */
margin: 0 auto; margin: 20px auto;
font-family: Microsoft YaHei UI; font-family: Microsoft YaHei UI;
font-weight: bold; font-weight: bold;
font-size: 22px; font-size: 22px;
@ -263,10 +263,12 @@ const submitForm = () => {
width: 1100px; width: 1100px;
span { span {
color: #323232;
font-size: 18px;
width: 50px; width: 50px;
margin-top: 30px; margin-top: 30px;
margin-left: 20px;
height: 100%; height: 100%;
font-weight: 400;
} }
} }
@ -279,6 +281,8 @@ const submitForm = () => {
border-radius: 6px; border-radius: 6px;
padding-left: 20px; padding-left: 20px;
border: 1px solid #999999; border: 1px solid #999999;
margin-left: 20px;
margin-right: 20px;
} }
.contactInputs::placeholder { .contactInputs::placeholder {
@ -337,7 +341,7 @@ const submitForm = () => {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: bold; font-weight: bold;
font-size: 36px; font-size: 36px;
color: #4E3C3C; color: #348CDD;
margin: 0 30px; margin: 0 30px;
} }
@ -348,10 +352,14 @@ const submitForm = () => {
} }
} }
.re_list_top {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.re_list { .re_list {
width: 50%;
height: 243px; height: 243px;
margin-top: 20px;
background: #FFFFFF; background: #FFFFFF;
border-radius: 8px; border-radius: 8px;
@ -366,6 +374,17 @@ const submitForm = () => {
.left-msg { .left-msg {
width: 1300px; width: 1300px;
margin: 0 auto; margin: 0 auto;
margin-top: 70px;
height: 1050px;
}
.to_img {
width: 275px;
position: absolute;
left: 0px;
right: 0px;
top: -13px;
margin: 0 auto;
} }
@media (max-width: 1440px) { @media (max-width: 1440px) {
@ -373,19 +392,24 @@ const submitForm = () => {
width: 1018px; width: 1018px;
margin: 0; margin: 0;
margin-left: 270px; margin-left: 270px;
margin-top: 40px;
} }
#myTextarea{
#myTextarea {
width: 752px; width: 752px;
} }
.contactInputs{
width: 210px; .contactInputs {
width: 196px;
} }
.inputforms { .inputforms {
display: flex; display: flex;
justify-content: start!important; justify-content: start !important;
align-items: center; align-items: center;
} }
.contactForm .inputforms span{
.contactForm .inputforms span {
width: 41px; width: 41px;
} }
} }

10
components/AppHome.vue
View File

@ -7,7 +7,7 @@
<div class="rightcon" id="homeid" @scroll="hmScroll"> <div class="rightcon" id="homeid" @scroll="hmScroll">
<div class="flex top_search "> <div class="flex top_search ">
<div style="width: 350px;"> <div style="width: 350px;">
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%;height: 100%;object-fit: cover;"> <img @click="toMore(0)" :src="`/img/index/dlogo.png`" style="cursor: pointer;;width: 100%;height: 100%;object-fit: cover;">
</div> </div>
<div class="inputform"> <div class="inputform">
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text" <input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text"
@ -312,14 +312,10 @@ const swiperOptionsimgs = {
const hmScroll = () => { const hmScroll = () => {
let home = document.getElementById('homeid'); let home = document.getElementById('homeid');
if (home.scrollTop + home.clientHeight >= home.scrollHeight) { if (home.scrollTop + home.clientHeight >= home.scrollHeight) {
setTimeout(function () { emit('toSwpe', 2);
emit('toSwpe', 2);
}, 500);
} }
if (home.scrollTop == 0) { if (home.scrollTop == 0) {
setTimeout(function () { emit('toSwpe', 0);
emit('toSwpe', 0);
}, 500);
} }
} }
const toSearch = () => { const toSearch = () => {

15
components/AppLuoYang.vue
View File

@ -8,7 +8,7 @@
<div class="rightcon" id="luoyangid" @scroll="hmScroll"> <div class="rightcon" id="luoyangid" @scroll="hmScroll">
<div class="flex top_search "> <div class="flex top_search ">
<div style="width: 350px;"> <div style="width: 350px;">
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%;height: 100%;object-fit: cover;"> <img @click="toMore(0)" :src="`/img/index/dlogo.png`" style="cursor: pointer;;width: 100%;height: 100%;object-fit: cover;">
</div> </div>
<div class="inputform"> <div class="inputform">
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text" <input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text"
@ -40,7 +40,7 @@
</div> </div>
</div> </div>
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;"> <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;">
<div v-for="item in MesList" class="ly_list" @mousemove="showCodeDo(item)" <div v-for="item in MesList" class="ly_list" @mousemove="showCodeDo(item)" @mouseleave="showCodeDo(0)"
@click="showCodeDo(item)"> @click="showCodeDo(item)">
<div> <div>
<img class="ly_list_img" :src="item.image"> <img class="ly_list_img" :src="item.image">
@ -111,17 +111,16 @@ onMounted(() => {
const hmScroll = () => { const hmScroll = () => {
let home = document.getElementById('luoyangid'); let home = document.getElementById('luoyangid');
if (home.scrollTop + home.clientHeight >= home.scrollHeight) { if (home.scrollTop + home.clientHeight >= home.scrollHeight) {
setTimeout(function () { emit('toSwpe', 5);
emit('toSwpe', 5);
}, 500);
} }
if (home.scrollTop == 0) { if (home.scrollTop == 0) {
setTimeout(function () { emit('toSwpe', 3);
emit('toSwpe', 3);
}, 500);
} }
} }
const emit = defineEmits(['toSwpe']) const emit = defineEmits(['toSwpe'])
const toMore = (index:number) => {
emit('toSwpe', index);
}
//搜索 //搜索
const toSearch = () => { const toSearch = () => {

17
components/AppMessage.vue
View File

@ -8,7 +8,7 @@
<div class="rightcon" id="msgid" @scroll="hmScroll"> <div class="rightcon" id="msgid" @scroll="hmScroll">
<div class="flex top_search "> <div class="flex top_search ">
<div style="width: 350px;"> <div style="width: 350px;">
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%;height: 100%;object-fit: cover;"> <img @click="toMore(0)" :src="`/img/index/dlogo.png`" style="cursor: pointer;;width: 100%;height: 100%;object-fit: cover;">
</div> </div>
<div class="inputform"> <div class="inputform">
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text" <input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text"
@ -101,17 +101,16 @@ onMounted(() => {
const hmScroll = () => { const hmScroll = () => {
let home = document.getElementById('msgid'); let home = document.getElementById('msgid');
if (home.scrollTop + home.clientHeight >= home.scrollHeight) { if (home.scrollTop + home.clientHeight >= home.scrollHeight) {
setTimeout(function () { emit('toSwpe', 7);
emit('toSwpe', 7);
}, 500);
} }
if (home.scrollTop == 0) { if (home.scrollTop == 0) {
setTimeout(function () { emit('toSwpe', 5);
emit('toSwpe', 5);
}, 500);
} }
} }
const emit = defineEmits(['toSwpe']) const emit = defineEmits(['toSwpe'])
const toMore = (index:number) => {
emit('toSwpe', index);
}
//跳转详情 //跳转详情
const openUrl = (id: number) => { const openUrl = (id: number) => {
@ -288,8 +287,8 @@ const getNewstypeList = async () => {
} }
&.active { &.active {
background: linear-gradient(0deg, rgba(51, 140, 222, 0.12) 0%, rgba(61, 146, 224, 0.12) 100%); background: #388FDF;
color: #3A91DF; color: #ffffff;
} }
} }
} }

17
components/AppNews.vue
View File

@ -8,7 +8,7 @@
<div class="rightcon" id="newsid" @scroll="hmScroll"> <div class="rightcon" id="newsid" @scroll="hmScroll">
<div class="flex top_search "> <div class="flex top_search ">
<div style="width: 350px;"> <div style="width: 350px;">
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%;height: 100%;object-fit: cover;"> <img @click="toMore(0)" :src="`/img/index/dlogo.png`" style="cursor: pointer;;width: 100%;height: 100%;object-fit: cover;">
</div> </div>
<div class="inputform"> <div class="inputform">
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text" <input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text"
@ -104,16 +104,15 @@ const emit = defineEmits(['toSwpe'])
const hmScroll = () => { const hmScroll = () => {
let home = document.getElementById('newsid'); let home = document.getElementById('newsid');
if (home.scrollTop + home.clientHeight >= home.scrollHeight) { if (home.scrollTop + home.clientHeight >= home.scrollHeight) {
setTimeout(function () { emit('toSwpe', 4);
emit('toSwpe', 4);
}, 500);
} }
if (home.scrollTop == 0) { if (home.scrollTop == 0) {
setTimeout(function () { emit('toSwpe', 2);
emit('toSwpe', 2);
}, 500);
} }
} }
const toMore = (index:number) => {
emit('toSwpe', index);
}
//跳转详情 //跳转详情
const openUrl = (id: number) => { const openUrl = (id: number) => {
window.open(`/info/${id}?type=1`) window.open(`/info/${id}?type=1`)
@ -289,8 +288,8 @@ const getNewstypeList = async () => {
} }
&.active { &.active {
background: linear-gradient(0deg, rgba(51, 140, 222, 0.12) 0%, rgba(61, 146, 224, 0.12) 100%); background: #388FDF;
color: #3A91DF; color: #ffffff;
} }
} }
} }

14
components/AppRegiment.vue
View File

@ -6,7 +6,7 @@
<div class="rightcon" id="regid" @scroll="hmScroll"> <div class="rightcon" id="regid" @scroll="hmScroll">
<div class="flex top_search "> <div class="flex top_search ">
<div style="width: 350px;"> <div style="width: 350px;">
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%;height: 100%;object-fit: cover;"> <img @click="toHome(0)" :src="`/img/index/dlogo.png`" style="cursor: pointer;;width: 100%;height: 100%;object-fit: cover;">
</div> </div>
<div class="inputform"> <div class="inputform">
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text" <input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text"
@ -149,14 +149,10 @@ onMounted(() => {
const hmScroll = () => { const hmScroll = () => {
let home = document.getElementById('regid'); let home = document.getElementById('regid');
if (home.scrollTop + home.clientHeight >= home.scrollHeight) { if (home.scrollTop + home.clientHeight >= home.scrollHeight) {
setTimeout(function () { emit('toSwpe',6);
emit('toSwpe',6);
}, 500);
} }
if (home.scrollTop == 0) { if (home.scrollTop == 0) {
setTimeout(function () { emit('toSwpe', 4);
emit('toSwpe', 4);
}, 500);
} }
} }
const fwImg = ref([]); const fwImg = ref([]);
@ -179,7 +175,9 @@ const emit = defineEmits(['toSwpe'])
const toMore = () => { const toMore = () => {
window.open(`/messageBoard`) window.open(`/messageBoard`)
} }
const toHome = (index:number) => {
emit('toSwpe', index);
}
//跳转详情 //跳转详情
const openUrl = (id: number) => { const openUrl = (id: number) => {
window.open(`/info/${id}?type=3`) window.open(`/info/${id}?type=3`)

31
pages/index.vue
View File

@ -17,32 +17,32 @@
<!-- 首页 --> <!-- 首页 -->
<swiper-slide> <swiper-slide>
<AppHome @toSwpe="toswiper"></AppHome> <AppHome v-if="swiper_exp == 1" @toSwpe="toswiper"></AppHome>
</swiper-slide> </swiper-slide>
<!-- 关于我们 --> <!-- 关于我们 -->
<swiper-slide> <swiper-slide>
<AppAbout @toSwpe="toswiper"></AppAbout> <AppAbout v-if="swiper_exp == 2" @toSwpe="toswiper"></AppAbout>
</swiper-slide> </swiper-slide>
<!-- 新闻动态 --> <!-- 新闻动态 -->
<swiper-slide> <swiper-slide>
<AppNews @toSwpe="toswiper"></AppNews> <AppNews v-if="swiper_exp == 3" @toSwpe="toswiper"></AppNews>
</swiper-slide> </swiper-slide>
<!-- 青春洛阳 --> <!-- 青春洛阳 -->
<swiper-slide> <swiper-slide>
<AppLuoYang @toSwpe="toswiper"></AppLuoYang> <AppLuoYang v-if="swiper_exp == 4" @toSwpe="toswiper"></AppLuoYang>
</swiper-slide> </swiper-slide>
<!-- 服务青年 --> <!-- 服务青年 -->
<swiper-slide> <swiper-slide>
<AppRegiment @toSwpe="toswiper"></AppRegiment> <AppRegiment v-if="swiper_exp == 5" @toSwpe="toswiper"></AppRegiment>
</swiper-slide> </swiper-slide>
<!--信息公开--> <!--信息公开-->
<swiper-slide> <swiper-slide>
<AppMessage @toSwpe="toswiper"></AppMessage> <AppMessage v-if="swiper_exp == 6" @toSwpe="toswiper"></AppMessage>
</swiper-slide> </swiper-slide>
<!-- 新闻动态详情 --> <!-- 新闻动态详情 -->
<!-- <swiper-slide :show="isNews" id="newsid"> <!-- <swiper-slide :show="isNews" id="newsid">
@ -53,8 +53,8 @@
<AppAboutdel></AppAboutdel> <AppAboutdel></AppAboutdel>
</swiper-slide> --> </swiper-slide> -->
<!-- 留言板 --> <!-- 留言板 -->
<swiper-slide > <swiper-slide>
<AppContactUs @toSwpe="toswiper"></AppContactUs> <AppContactUs v-if="swiper_exp == 7" @toSwpe="toswiper"></AppContactUs>
</swiper-slide> </swiper-slide>
<!-- 搜索详情 --> <!-- 搜索详情 -->
<!-- <swiper-slide :show="isSearch" id="searchid"> <!-- <swiper-slide :show="isSearch" id="searchid">
@ -156,12 +156,17 @@ const onSwiperNews = (swiper: any) => {
swiper.on('slideChange', () => { swiper.on('slideChange', () => {
// 更新当前活动幻灯片索引 // 更新当前活动幻灯片索引
// isMeassage.value = false; // isMeassage.value = false;
// console.log(newsSwiper); console.log(swiper.realIndex);
swiper_exp.value = swiper.realIndex; swiper_exp.value = swiper.realIndex;
// newsSwiper.mousewheel.disable(); // newsSwiper.mousewheel.disable();
// newsSwiper.allowTouchMove = true;// 开启拖动 // newsSwiper.allowTouchMove = true;// 开启拖动
newsSwiper.mousewheel.disable(); if (swiper.realIndex != 0) {
newsSwiper.allowTouchMove = true;// 开启拖动 newsSwiper.mousewheel.disable();
newsSwiper.allowTouchMove = true;// 开启拖动
}else{
newsSwiper.mousewheel.enable();
newsSwiper.allowTouchMove = true;
}
// if (swiper.realIndex == 1) { // if (swiper.realIndex == 1) {
// newsSwiper.mousewheel.disable(); // newsSwiper.mousewheel.disable();
// newsSwiper.allowTouchMove = true;// 开启拖动 // newsSwiper.allowTouchMove = true;// 开启拖动
@ -191,13 +196,13 @@ const toswiper = (index: number) => {
if (newsSwiper.realIndex + 1 != index) { if (newsSwiper.realIndex + 1 != index) {
newsSwiper.slideTo(index, 0, true) newsSwiper.slideTo(index, 0, true)
} else { } else {
newsSwiper.slideTo(index, 1000, true) newsSwiper.slideTo(index, 800, true)
} }
} else { } else {
if (newsSwiper.realIndex - 1 != index) { if (newsSwiper.realIndex - 1 != index) {
newsSwiper.slideTo(index, 0, true) newsSwiper.slideTo(index, 0, true)
} else { } else {
newsSwiper.slideTo(index, 1000, true) newsSwiper.slideTo(index, 800, true)
} }
} }
} }

64
pages/info/[id].vue
View File

@ -70,28 +70,27 @@
</div> </div>
</div> </div>
<div class="rig_box" :class="{'topding': topding}">
<div class="rig_box">
<n-tabs :bar-width="0" type="line" class="custom-tabs" pane-style="background-color: #ffffff;"> <n-tabs :bar-width="0" type="line" class="custom-tabs" pane-style="background-color: #ffffff;">
<n-tab-pane name="oasis" tab="热门推荐" style="padding: 30px;"> <n-tab-pane name="oasis" tab="热门推荐" style="padding: 30px;">
<div class="flex flex-row" v-for="item, index in remList" :key="index" <div class="flex flex-row" v-for="item, index in remList" :key="index"
style="padding-bottom:30px;cursor: pointer;" style="padding-bottom:30px;cursor: pointer;"
@click="gotodetail({ id: item.id, type: '1' })"> @click="gotodetail({ id: item.id, type: '1' })">
<div class="number_t" v-if="index == 0 || index == 1 || index == 2"> <div :class="index === 0 ? 'number_t' : index === 1 ? 'number_y' : 'number_u'" v-if="index == 0 || index == 1 || index == 2">
{{ index + 1 > 10 ? index + 1 : '0' + (index + 1) }} {{ index + 1 > 10 ? index + 1 : '0' + (index + 1) }}
</div> </div>
<div class="number_t1" v-else> <div class="number_t1" v-else>
<span v-if="index + 1 == 6" style="color: #D70E08;">{{ index + 1 > 10 ? index + 1 : <!-- <span v-if="index + 1 == 6" style="color: #D70E08;">{{ index + 1 > 10 ? index + 1 :
'0' + (index + 1) }}</span> '0' + (index + 1) }}</span> -->
<span v-else>{{ index + 1 > 10 ? index + 1 : '0' + (index + 1) }}</span> <span>{{ index + 1 > 10 ? index + 1 : '0' + (index + 1) }}</span>
</div> </div>
<div class="content_t2"> <div class="content_t2">
<p class="p1 one-line-ellipsis">{{ item.title }}</p> <p class="p1 one-line-ellipsis">{{ item.title }}</p>
<p class="p2 flex justify-between items-center"> <p class="p2 flex justify-between items-center">
<span>{{ item.source }}</span> <span>{{ item.source }}</span>
<span class="flex items-center"> <span class="flex items-center">
<img src="/img/views.png" alt="" style="padding-right: 10px;"> <img src="/img/views.png" alt="" style="height: 13px;padding-right: 10px;">
{{ item.views }} {{ item.views }}
</span> </span>
</p> </p>
@ -102,13 +101,13 @@
<div class="flex flex-row" v-for="item, index in jinxList" :key="index" <div class="flex flex-row" v-for="item, index in jinxList" :key="index"
style="padding-bottom:30px; cursor: pointer;" style="padding-bottom:30px; cursor: pointer;"
@click="gotodetail({ id: item.id, type: '1' })"> @click="gotodetail({ id: item.id, type: '1' })">
<div class="number_t" v-if="index == 0 || index == 1 || index == 2"> <div :class="index === 0 ? 'number_t' : index === 1 ? 'number_y' : 'number_u'" v-if="index == 0 || index == 1 || index == 2">
{{ index + 1 > 10 ? index + 1 : '0' + (index + 1) }} {{ index + 1 > 10 ? index + 1 : '0' + (index + 1) }}
</div> </div>
<div class="number_t1" v-else> <div class="number_t1" v-else>
<span v-if="index + 1 == 6" style="color: #D70E08;">{{ index + 1 > 10 ? index + 1 : <!-- <span v-if="index + 1 == 6" style="color: #D70E08;">{{ index + 1 > 10 ? index + 1 :
'0' + (index + 1) }}</span> '0' + (index + 1) }}</span> -->
<span v-else>{{ index + 1 > 10 ? index + 1 : '0' + (index + 1) }}</span> <span>{{ index + 1 > 10 ? index + 1 : '0' + (index + 1) }}</span>
</div> </div>
<div class="content_t2"> <div class="content_t2">
<p class="p1 one-line-ellipsis">{{ item.title }}</p> <p class="p1 one-line-ellipsis">{{ item.title }}</p>
@ -251,7 +250,7 @@ const gotodetail = async (data) => {
} }
const hmScroll = () => { const hmScroll = () => {
let tjright = document.getElementById('tjright'); let tjright = document.getElementById('tjright');
if (tjright.scrollTop > 159) { if (tjright.scrollTop > 250) {
topding.value = true; topding.value = true;
} else { } else {
topding.value = false; topding.value = false;
@ -424,6 +423,34 @@ onMounted(() => {
align-items: center; align-items: center;
margin-right: 20px; margin-right: 20px;
} }
.number_y {
width: 34px;
height: 34px;
background: #FFA234;
border-radius: 17px;
font-family: Microsoft YaHei UI;
font-weight: 400;
font-size: 18px;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20px;
}
.number_u {
width: 34px;
height: 34px;
background: #338CDE;
border-radius: 17px;
font-family: Microsoft YaHei UI;
font-weight: 400;
font-size: 18px;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20px;
}
.number_t1 { .number_t1 {
width: 34px; width: 34px;
@ -498,7 +525,7 @@ onMounted(() => {
position: fixed; position: fixed;
top: 0; top: 0;
margin-top: 0; margin-top: 0;
right: 315px; right: 312px;
width: 430px; width: 430px;
} }
} }
@ -521,15 +548,16 @@ onMounted(() => {
width: 1032px; width: 1032px;
margin-left: 270px; margin-left: 270px;
} }
.rig_box {
width: 700px;
}
.top_bar { .top_bar {
margin: 0px; margin: 0px;
width: 1032px; width: 1032px;
margin-left: 270px; margin-left: 270px;
} }
.lef_box{
width: 567px!important;
}
.topding {
right: 138px!important;
}
} }
</style> </style>

BIN
public/img/index/homebg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 MiB

After

Width:  |  Height:  |  Size: 9.6 MiB

BIN
public/img/tt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB