1，手机端内容新列表 轮播图 详情 留言板
2、手机端文章详情，百科详情，公开信息详情
This commit is contained in:
parent
0de5564a45
commit
81ca4297d8
@ -985,16 +985,19 @@
|
||||
}
|
||||
|
||||
.box_13 {
|
||||
background-color: rgba(248, 249, 251, 1);
|
||||
// background-color: rgba(248, 249, 251, 1);
|
||||
width: 380px;
|
||||
height: 254px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.text-group_6 {
|
||||
width: 340px;
|
||||
height: 90px;
|
||||
margin: 20px 0 0 18px;
|
||||
width: 340px;
|
||||
height: 90px;
|
||||
margin: 20px 0 0 18px;
|
||||
background: #f2f2f2;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.text_43 {
|
||||
@ -1030,17 +1033,18 @@
|
||||
}
|
||||
|
||||
.section_6 {
|
||||
background-color: rgba(252, 116, 40, 1);
|
||||
background: #3B90DF;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-top: 5px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.text_44 {
|
||||
width: 56px;
|
||||
height: 14px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(252, 116, 40, 1);
|
||||
color: #3B90DF;
|
||||
font-size: 14px;
|
||||
font-family: Microsoft YaHei UI-Regular;
|
||||
font-weight: NaN;
|
||||
@ -1284,7 +1288,7 @@
|
||||
.box_18 {
|
||||
width: 100%;
|
||||
height: 465px;
|
||||
background: var(--bg-5) 100% no-repeat;
|
||||
// background: var(--bg-5) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
justify-content: flex-center;
|
||||
}
|
||||
@ -1651,6 +1655,7 @@
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
|
||||
.text-wrapper_13 {
|
||||
width: 100%;
|
||||
// height: 17px;
|
||||
|
||||
@ -158,5 +158,6 @@ onMounted(() => {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
}
|
||||
</style>
|
||||
@ -6,7 +6,7 @@
|
||||
<!-- 右边内容栏 -->
|
||||
<div class="rightcon" id="homeid" @scroll="hmScroll">
|
||||
<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;">
|
||||
</div>
|
||||
<div class="inputform">
|
||||
@ -20,13 +20,9 @@
|
||||
|
||||
<div class="flex h-auto home_con">
|
||||
<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="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)">
|
||||
<div class="img_tits">{{ item.title }}</div>
|
||||
<img :src="item.image" style="width: 100%;height: 100%;object-fit: cover;">
|
||||
@ -74,6 +70,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex h-auto home_con2">
|
||||
<div class="fly1s">
|
||||
<div class="re_boxs">
|
||||
@ -225,7 +222,6 @@ const swiperOptionsimgs = {
|
||||
}
|
||||
const hmScroll = () => {
|
||||
let home = document.getElementById('homeid');
|
||||
console.log(home.scrollTop,home.clientHeight,home.scrollHeight);
|
||||
if( home.scrollTop + home.clientHeight >= home.scrollHeight){
|
||||
setTimeout(function() {
|
||||
emit('toSwpe',2);
|
||||
@ -397,7 +393,7 @@ onMounted(() => {
|
||||
.inputform {
|
||||
position: relative;
|
||||
width: 340px;
|
||||
margin-right: 319px;
|
||||
// margin-right: 319px;
|
||||
}
|
||||
.contactInput {
|
||||
width: 337px;
|
||||
@ -433,34 +429,17 @@ onMounted(() => {
|
||||
// margin: 0 auto;
|
||||
margin-top: 50px;
|
||||
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{
|
||||
width: 600px;
|
||||
width: 50%;
|
||||
// padding-left: 80px;
|
||||
.swiper_s{
|
||||
width: 100%;
|
||||
height: 418px;
|
||||
}
|
||||
}
|
||||
.fly1{
|
||||
width: 600px;
|
||||
width: 50%;
|
||||
// margin-left: 30px;
|
||||
}
|
||||
.re_box{
|
||||
@ -648,4 +627,12 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 1440px) {
|
||||
.home_con2,.home_con1,.home_con{
|
||||
width: 900px;
|
||||
}
|
||||
.fly1s{
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
<div class="fly" >
|
||||
<div class="re_box">
|
||||
<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-slide v-for="(item,index) in xsImg" :key="index">
|
||||
<div class="img_tits">{{ item.title }}</div>
|
||||
@ -55,9 +55,17 @@
|
||||
:modules="modules"
|
||||
:watchSlidesProgress="true"
|
||||
@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;">
|
||||
<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>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
@ -73,9 +81,6 @@
|
||||
<div class="text-wrapper_10">
|
||||
<span class="text_41">新闻动态</span>
|
||||
</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 class="box_12 flex-row justify-center">
|
||||
<!-- <img @click="openUrl(item.id)" class="image_7 leftBoxTop" referrerpolicy="no-referrer"
|
||||
@ -107,7 +112,7 @@
|
||||
</div> -->
|
||||
</div>
|
||||
<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;">
|
||||
<form class="contactForm mt-6 w-full" @submit.prevent="submitForm">
|
||||
@ -179,7 +184,16 @@ const openType = (type: number) => {
|
||||
console.log(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)
|
||||
|
||||
let newsSwiper: any = null
|
||||
@ -451,7 +465,32 @@ const swiperOptionsimgs = {
|
||||
|
||||
.hy_my_home {
|
||||
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{
|
||||
height: 323px;
|
||||
@ -518,7 +557,7 @@ const swiperOptionsimgs = {
|
||||
bottom: 20px;
|
||||
right: 30px;
|
||||
height: 36px;
|
||||
background-color: #222222;
|
||||
background-color: #3B90DF;
|
||||
border: none;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
@ -744,7 +783,8 @@ const swiperOptionsimgs = {
|
||||
// }
|
||||
}
|
||||
.swiper{
|
||||
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
.swiper-pagination{
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
|
||||
@ -234,11 +234,6 @@ onMounted(() => {
|
||||
background-size: 100% 100%;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
.fiximg {
|
||||
img {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top_search {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user