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

15
components/AppAbout.vue
View File

@ -8,7 +8,7 @@
<div class="rightcon" id="aboutid" @scroll="hmScroll">
<div class="flex top_search ">
<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 class="inputform">
<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>
<div style="width: 100%;height: 3px;border-top: 1px dashed #BBBBBB;"></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>
</div>
@ -94,17 +94,16 @@ onMounted(() => {
const hmScroll = () => {
let home = document.getElementById('aboutid');
if (home.scrollTop + home.clientHeight >= home.scrollHeight) {
setTimeout(function () {
emit('toSwpe', 3);
}, 500);
}
if (home.scrollTop == 0) {
setTimeout(function () {
emit('toSwpe', 1);
}, 500);
}
}
const emit = defineEmits(['toSwpe'])
const toMore = (index:number) => {
emit('toSwpe', index);
}
//搜索
const toSearch = () => {
@ -253,8 +252,8 @@ const getNewstypeList = async () => {
}
&.active {
background: linear-gradient(0deg, rgba(51, 140, 222, 0.12) 0%, rgba(61, 146, 224, 0.12) 100%);
color: #3A91DF;
background: #388FDF;
color: #ffffff;
}
}
}

86
components/AppContactUs.vue
View File

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

6
components/AppHome.vue
View File

@ -7,7 +7,7 @@
<div class="rightcon" id="homeid" @scroll="hmScroll">
<div class="flex top_search ">
<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 class="inputform">
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text"
@ -312,14 +312,10 @@ const swiperOptionsimgs = {
const hmScroll = () => {
let home = document.getElementById('homeid');
if (home.scrollTop + home.clientHeight >= home.scrollHeight) {
setTimeout(function () {
emit('toSwpe', 2);
}, 500);
}
if (home.scrollTop == 0) {
setTimeout(function () {
emit('toSwpe', 0);
}, 500);
}
}
const toSearch = () => {

11
components/AppLuoYang.vue
View File

@ -8,7 +8,7 @@
<div class="rightcon" id="luoyangid" @scroll="hmScroll">
<div class="flex top_search ">
<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 class="inputform">
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text"
@ -40,7 +40,7 @@
</div>
</div>
<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)">
<div>
<img class="ly_list_img" :src="item.image">
@ -111,17 +111,16 @@ onMounted(() => {
const hmScroll = () => {
let home = document.getElementById('luoyangid');
if (home.scrollTop + home.clientHeight >= home.scrollHeight) {
setTimeout(function () {
emit('toSwpe', 5);
}, 500);
}
if (home.scrollTop == 0) {
setTimeout(function () {
emit('toSwpe', 3);
}, 500);
}
}
const emit = defineEmits(['toSwpe'])
const toMore = (index:number) => {
emit('toSwpe', index);
}
//搜索
const toSearch = () => {

13
components/AppMessage.vue
View File

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

13
components/AppNews.vue
View File

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

10
components/AppRegiment.vue
View File

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

25
pages/index.vue
View File

@ -17,32 +17,32 @@
<!-- 首页 -->
<swiper-slide>
<AppHome @toSwpe="toswiper"></AppHome>
<AppHome v-if="swiper_exp == 1" @toSwpe="toswiper"></AppHome>
</swiper-slide>
<!-- 关于我们 -->
<swiper-slide>
<AppAbout @toSwpe="toswiper"></AppAbout>
<AppAbout v-if="swiper_exp == 2" @toSwpe="toswiper"></AppAbout>
</swiper-slide>
<!-- 新闻动态 -->
<swiper-slide>
<AppNews @toSwpe="toswiper"></AppNews>
<AppNews v-if="swiper_exp == 3" @toSwpe="toswiper"></AppNews>
</swiper-slide>
<!-- 青春洛阳 -->
<swiper-slide>
<AppLuoYang @toSwpe="toswiper"></AppLuoYang>
<AppLuoYang v-if="swiper_exp == 4" @toSwpe="toswiper"></AppLuoYang>
</swiper-slide>
<!-- 服务青年 -->
<swiper-slide>
<AppRegiment @toSwpe="toswiper"></AppRegiment>
<AppRegiment v-if="swiper_exp == 5" @toSwpe="toswiper"></AppRegiment>
</swiper-slide>
<!--信息公开-->
<swiper-slide>
<AppMessage @toSwpe="toswiper"></AppMessage>
<AppMessage v-if="swiper_exp == 6" @toSwpe="toswiper"></AppMessage>
</swiper-slide>
<!-- 新闻动态详情 -->
<!-- <swiper-slide :show="isNews" id="newsid">
@ -54,7 +54,7 @@
</swiper-slide> -->
<!-- 留言板 -->
<swiper-slide>
<AppContactUs @toSwpe="toswiper"></AppContactUs>
<AppContactUs v-if="swiper_exp == 7" @toSwpe="toswiper"></AppContactUs>
</swiper-slide>
<!-- 搜索详情 -->
<!-- <swiper-slide :show="isSearch" id="searchid">
@ -156,12 +156,17 @@ const onSwiperNews = (swiper: any) => {
swiper.on('slideChange', () => {
// 更新当前活动幻灯片索引
// isMeassage.value = false;
// console.log(newsSwiper);
console.log(swiper.realIndex);
swiper_exp.value = swiper.realIndex;
// newsSwiper.mousewheel.disable();
// newsSwiper.allowTouchMove = true;// 开启拖动
if (swiper.realIndex != 0) {
newsSwiper.mousewheel.disable();
newsSwiper.allowTouchMove = true;// 开启拖动
}else{
newsSwiper.mousewheel.enable();
newsSwiper.allowTouchMove = true;
}
// if (swiper.realIndex == 1) {
// newsSwiper.mousewheel.disable();
// newsSwiper.allowTouchMove = true;// 开启拖动
@ -191,13 +196,13 @@ const toswiper = (index: number) => {
if (newsSwiper.realIndex + 1 != index) {
newsSwiper.slideTo(index, 0, true)
} else {
newsSwiper.slideTo(index, 1000, true)
newsSwiper.slideTo(index, 800, true)
}
} else {
if (newsSwiper.realIndex - 1 != index) {
newsSwiper.slideTo(index, 0, true)
} 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 class="rig_box">
<div class="rig_box" :class="{'topding': topding}">
<n-tabs :bar-width="0" type="line" class="custom-tabs" pane-style="background-color: #ffffff;">
<n-tab-pane name="oasis" tab="热门推荐" style="padding: 30px;">
<div class="flex flex-row" v-for="item, index in remList" :key="index"
style="padding-bottom:30px;cursor: pointer;"
@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) }}
</div>
<div class="number_t1" v-else>
<span v-if="index + 1 == 6" style="color: #D70E08;">{{ index + 1 > 10 ? index + 1 :
'0' + (index + 1) }}</span>
<span v-else>{{ index + 1 > 10 ? index + 1 : '0' + (index + 1) }}</span>
<!-- <span v-if="index + 1 == 6" style="color: #D70E08;">{{ index + 1 > 10 ? index + 1 :
'0' + (index + 1) }}</span> -->
<span>{{ index + 1 > 10 ? index + 1 : '0' + (index + 1) }}</span>
</div>
<div class="content_t2">
<p class="p1 one-line-ellipsis">{{ item.title }}</p>
<p class="p2 flex justify-between items-center">
<span>{{ item.source }}</span>
<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 }}
</span>
</p>
@ -102,13 +101,13 @@
<div class="flex flex-row" v-for="item, index in jinxList" :key="index"
style="padding-bottom:30px; cursor: pointer;"
@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) }}
</div>
<div class="number_t1" v-else>
<span v-if="index + 1 == 6" style="color: #D70E08;">{{ index + 1 > 10 ? index + 1 :
'0' + (index + 1) }}</span>
<span v-else>{{ index + 1 > 10 ? index + 1 : '0' + (index + 1) }}</span>
<!-- <span v-if="index + 1 == 6" style="color: #D70E08;">{{ index + 1 > 10 ? index + 1 :
'0' + (index + 1) }}</span> -->
<span>{{ index + 1 > 10 ? index + 1 : '0' + (index + 1) }}</span>
</div>
<div class="content_t2">
<p class="p1 one-line-ellipsis">{{ item.title }}</p>
@ -251,7 +250,7 @@ const gotodetail = async (data) => {
}
const hmScroll = () => {
let tjright = document.getElementById('tjright');
if (tjright.scrollTop > 159) {
if (tjright.scrollTop > 250) {
topding.value = true;
} else {
topding.value = false;
@ -424,6 +423,34 @@ onMounted(() => {
align-items: center;
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 {
width: 34px;
@ -498,7 +525,7 @@ onMounted(() => {
position: fixed;
top: 0;
margin-top: 0;
right: 315px;
right: 312px;
width: 430px;
}
}
@ -521,15 +548,16 @@ onMounted(() => {
width: 1032px;
margin-left: 270px;
}
.rig_box {
width: 700px;
}
.top_bar {
margin: 0px;
width: 1032px;
margin-left: 270px;
}
.lef_box{
width: 567px!important;
}
.topding {
right: 138px!important;
}
}
</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