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

1，手机端内容新列表 轮播图 详情 留言板

Browse Source 
2、手机端文章详情，百科详情，公开信息详情
This commit is contained in:
张凯 2025-06-11 18:23:32 +08:00
parent 0de5564a45
commit 81ca4297d8
5 changed files with 84 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
assets/index.scss
View File

@ -985,7 +985,7 @@
} }
.box_13 { .box_13 {
background-color: rgba(248, 249, 251, 1); // background-color: rgba(248, 249, 251, 1);
width: 380px; width: 380px;
height: 254px; height: 254px;
margin-left: 30px; margin-left: 30px;
@ -995,6 +995,9 @@
width: 340px; width: 340px;
height: 90px; height: 90px;
margin: 20px 0 0 18px; margin: 20px 0 0 18px;
background: #f2f2f2;
padding: 10px;
border-radius: 10px;
} }
.text_43 { .text_43 {
@ -1030,17 +1033,18 @@
} }
.section_6 { .section_6 {
background-color: rgba(252, 116, 40, 1); background: #3B90DF;
width: 6px; width: 6px;
height: 6px; height: 6px;
margin-top: 5px; margin-top: 5px;
border-radius: 50%;
} }
.text_44 { .text_44 {
width: 56px; width: 56px;
height: 14px; height: 14px;
overflow-wrap: break-word; overflow-wrap: break-word;
color: rgba(252, 116, 40, 1); color: #3B90DF;
font-size: 14px; font-size: 14px;
font-family: Microsoft YaHei UI-Regular; font-family: Microsoft YaHei UI-Regular;
font-weight: NaN; font-weight: NaN;
@ -1284,7 +1288,7 @@
.box_18 { .box_18 {
width: 100%; width: 100%;
height: 465px; height: 465px;
background: var(--bg-5) 100% no-repeat; // background: var(--bg-5) 100% no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
justify-content: flex-center; justify-content: flex-center;
} }
@ -1651,6 +1655,7 @@
margin-bottom: 50px; margin-bottom: 50px;
} }
.text-wrapper_13 { .text-wrapper_13 {
width: 100%; width: 100%;
// height: 17px; // height: 17px;

3
components/AppHeader.vue
View File

@ -158,5 +158,6 @@ onMounted(() => {
cursor: pointer; cursor: pointer;
} }
} }
@media screen and (max-width: 768px) {
}
</style> </style>

51
components/AppHome.vue
View File

@ -6,7 +6,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: 572px;height: 69px;margin-left: 415px;"> <div style="width: 572px;margin-left: 415px;">
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%;height: 100%;object-fit: cover;"> <img :src="`/img/index/dlogo.png`" alt="" style="width: 100%;height: 100%;object-fit: cover;">
</div> </div>
<div class="inputform"> <div class="inputform">
@ -20,13 +20,9 @@
<div class="flex h-auto home_con"> <div class="flex h-auto home_con">
<div class="fly"> <div class="fly">
<!-- <div class="fly_text">
<span>逐梦<b style="color: #FFFFFF;">新声</b></span>
<img :src="`/img/index/fly.png`" alt=""></img>
</div> -->
<div class="re_box" > <div class="re_box" >
<div class="swiper" style="border-radius: 12px 0 0 12px;"> <div class="swiper" style="border-radius: 12px 0 0 12px;">
<swiper class="w-[600px] h-[418px]" @swiper="onSwiperImgs" v-bind="swiperOptionsimgs"> <swiper class="swiper_s" @swiper="onSwiperImgs" v-bind="swiperOptionsimgs">
<swiper-slide v-for="(item,index) in xsImg" :key="index" @click="openUrl(item.url)"> <swiper-slide v-for="(item,index) in xsImg" :key="index" @click="openUrl(item.url)">
<div class="img_tits">{{ item.title }}</div> <div class="img_tits">{{ item.title }}</div>
<img :src="item.image" style="width: 100%;height: 100%;object-fit: cover;"> <img :src="item.image" style="width: 100%;height: 100%;object-fit: cover;">
@ -74,6 +70,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex h-auto home_con2"> <div class="flex h-auto home_con2">
<div class="fly1s"> <div class="fly1s">
<div class="re_boxs"> <div class="re_boxs">
@ -225,7 +222,6 @@ const swiperOptionsimgs = {
} }
const hmScroll = () => { const hmScroll = () => {
let home = document.getElementById('homeid'); let home = document.getElementById('homeid');
console.log(home.scrollTop,home.clientHeight,home.scrollHeight);
if( home.scrollTop + home.clientHeight >= home.scrollHeight){ if( home.scrollTop + home.clientHeight >= home.scrollHeight){
setTimeout(function() { setTimeout(function() {
emit('toSwpe',2); emit('toSwpe',2);
@ -397,7 +393,7 @@ onMounted(() => {
.inputform { .inputform {
position: relative; position: relative;
width: 340px; width: 340px;
margin-right: 319px; // margin-right: 319px;
} }
.contactInput { .contactInput {
width: 337px; width: 337px;
@ -433,34 +429,17 @@ onMounted(() => {
// margin: 0 auto; // margin: 0 auto;
margin-top: 50px; margin-top: 50px;
margin-left: 400px; margin-left: 400px;
.fly_text{
position: relative;
width: 305px;
height: 101px;
img{
position: absolute;
top: 0;
right: 0;
width: 305px;
height: 101px;
}
span{
position: absolute;
top: 40px;
left: 100px;
font-family: Microsoft YaHei UI;
font-weight: bolder;
font-size: 36px;
color: #FFA234;
z-index: 1;
}
}
.fly{ .fly{
width: 600px; width: 50%;
// padding-left: 80px; // padding-left: 80px;
.swiper_s{
width: 100%;
height: 418px;
}
} }
.fly1{ .fly1{
width: 600px; width: 50%;
// margin-left: 30px; // margin-left: 30px;
} }
.re_box{ .re_box{
@ -648,4 +627,12 @@ onMounted(() => {
} }
} }
} }
@media (max-width: 1440px) {
.home_con2,.home_con1,.home_con{
width: 900px;
}
.fly1s{
width: 500px;
}
}
</style> </style>

62
pages/phone_index.vue
View File

@ -18,7 +18,7 @@
<div class="fly" > <div class="fly" >
<div class="re_box"> <div class="re_box">
<span class="w-[100%] text_14" style="margin-top: 0;">文章精选</span> <span class="w-[100%] text_14" style="margin-top: 0;">文章精选</span>
<div class="swiper" style="border-radius: 12px 12px 0 0;"> <div class="swiper">
<swiper class="w-[100%] h-[228px]" @swiper="onSwiperImgs" v-bind="swiperOptionsimgs"> <swiper class="w-[100%] h-[228px]" @swiper="onSwiperImgs" v-bind="swiperOptionsimgs">
<swiper-slide v-for="(item,index) in xsImg" :key="index"> <swiper-slide v-for="(item,index) in xsImg" :key="index">
<div class="img_tits">{{ item.title }}</div> <div class="img_tits">{{ item.title }}</div>
@ -55,9 +55,17 @@
:modules="modules" :modules="modules"
:watchSlidesProgress="true" :watchSlidesProgress="true"
@swiper="onSwiperExp"> @swiper="onSwiperExp">
<swiper-slide v-for="(item, index) in 14" :key="index"> <swiper-slide v-for="(item, index) in bstList" :key="index" @click="openUrl(item.id)">
<div style="padding: 20px;"> <div style="padding: 20px;">
<img class="hy_my_home" :src="`${$cdnUrl}/img/home_al/op${item}.png`"> <!-- <img class="hy_my_home" :src="`${$cdnUrl}/img/home_al/op${item}.png`"> -->
<div class="hy_my_home">
<div class="bst_con">
<img :src="`/img/index/bst${index+1}.png`" alt="" style="width: 34px;height: 34px;margin-top: 25px;margin-bottom: 15px;">
<div class="bsttitle">
{{ item.title }}
</div>
</div>
</div>
</div> </div>
</swiper-slide> </swiper-slide>
</swiper> </swiper>
@ -73,9 +81,6 @@
<div class="text-wrapper_10"> <div class="text-wrapper_10">
<span class="text_41">新闻动态</span> <span class="text_41">新闻动态</span>
</div> </div>
<div class="text-wrapper_11" style="margin-bottom: 20px;">
<span class="text_42">news information</span>
</div>
<div v-for="item in newsList"> <div v-for="item in newsList">
<div class="box_12 flex-row justify-center"> <div class="box_12 flex-row justify-center">
<!-- <img @click="openUrl(item.id)" class="image_7 leftBoxTop" referrerpolicy="no-referrer" <!-- <img @click="openUrl(item.id)" class="image_7 leftBoxTop" referrerpolicy="no-referrer"
@ -107,7 +112,7 @@
</div> --> </div> -->
</div> </div>
<div class="box_18 flex-col" style="overflow: hidden;"> <div class="box_18 flex-col" style="overflow: hidden;">
<span class="text_53" style="color: #fff;">留言版</span> <span class="text_53" >团团留言版</span>
<div class="numberTopBox" style="margin:0 auto;padding-bottom: 30px;"> <div class="numberTopBox" style="margin:0 auto;padding-bottom: 30px;">
<form class="contactForm mt-6 w-full" @submit.prevent="submitForm"> <form class="contactForm mt-6 w-full" @submit.prevent="submitForm">
@ -179,7 +184,16 @@ const openType = (type: number) => {
console.log(type); console.log(type);
typeId.value = type; typeId.value = type;
} }
const bstList = ref([
{title:"中国共产主义青年团的性质是什么?",id:5969},
{title:"中国共产主义青年团的行动指南是什么?",id:5970},
{title:"为什么说共青团是中国共产党的助手和后备军?",id:5971},
{title:"中国共产主义青年团在新时代的基本任务是什么?",id:5972},
{title:"怎样加入中国共产主义青年团?",id:5973},
{title:"团员必须履行哪些义务?",id:5974},
{title:"团员享有哪些权利?",id:5975},
{title:"团旗、团徽和团歌分别是什么?",id:5976}
])
const videoShow = ref(false) const videoShow = ref(false)
let newsSwiper: any = null let newsSwiper: any = null
@ -451,7 +465,32 @@ const swiperOptionsimgs = {
.hy_my_home { .hy_my_home {
width: 100% !important; width: 100% !important;
height: auto !important; // height: auto !important;
height: 150px;
background-image: url('/img/index/bstbg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
.bst_con{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.bsttitle{
width: 80%;
font-family: Microsoft YaHei UI;
font-weight: bold;
font-size: 18px;
color: #FFFFFF;
text-align: center;
}
&:hover{
.bsttitle{
color: #FFE7B8;
}
}
}
} }
.section_1{ .section_1{
height: 323px; height: 323px;
@ -518,7 +557,7 @@ const swiperOptionsimgs = {
bottom: 20px; bottom: 20px;
right: 30px; right: 30px;
height: 36px; height: 36px;
background-color: #222222; background-color: #3B90DF;
border: none; border: none;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
@ -744,7 +783,8 @@ const swiperOptionsimgs = {
// } // }
} }
.swiper{ .swiper{
width: 100%;
border-radius: 10px;
.swiper-pagination{ .swiper-pagination{
text-align: right; text-align: right;
padding-right: 10px; padding-right: 10px;

5
pages/search_info/index.vue
View File

@ -234,11 +234,6 @@ onMounted(() => {
background-size: 100% 100%; background-size: 100% 100%;
overflow-y: auto; overflow-y: auto;
position: absolute; position: absolute;
.fiximg {
img {
margin-bottom: 20px;
}
}
} }
.top_search { .top_search {