1,手机端内容新列表 轮播图 详情 留言板
2、手机端文章详情,百科详情,公开信息详情
This commit is contained in:
parent
0de5564a45
commit
81ca4297d8
@ -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;
|
||||||
|
@ -158,5 +158,6 @@ onMounted(() => {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
}
|
||||||
</style>
|
</style>
|
@ -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>
|
||||||
|
@ -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;
|
||||||
|
@ -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 {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user