all
This commit is contained in:
我是个攻城狮
@@ -0,0 +1,405 @@
|
||||
<template>
|
||||
<Layout :index="0" :banner="0">
|
||||
<view class="content_index">
|
||||
<view class="news_index">
|
||||
<view class="index_swiper">
|
||||
<swiper class="index_swipers" :current="currentIndex" :autoplay="true" :interval="5000" :duration="1000" indicator-dots="true" indicator-color="#ffffff" indicator-active-color="#F48612">
|
||||
<swiper-item v-for="(item,index) in list" :key="index">
|
||||
<view class="banner-swiper-item">
|
||||
<image class="banner-imgs" :src="item.image['file_path']" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="gname">
|
||||
<view class="names">{{item.article_title}}</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<view class="index_news">
|
||||
<a class="index_news_list " :class="{'news_one':index==0}" v-for="(item,index) in newsList" :key="index" :href="'/articleDetails?index=2&id='+item.article_id">
|
||||
<view class="index_news_name ">
|
||||
<view class="news_dian" v-if="index>0"></view>
|
||||
<view class="news_name">{{item.article_title}}</view>
|
||||
</view>
|
||||
<view class="news_date" v-if="index>0">{{$mUtils.removeTime(item.create_time)}}</view>
|
||||
</a>
|
||||
|
||||
<view class="more_news" @tap="goPath('/news')">
|
||||
更多新闻>>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="good_game bgc-02">
|
||||
<view class="c_game" @tap="goPath('/game')">
|
||||
<image class="tj" src="../static/img/index/tj.png"></image>
|
||||
<view class="more">更多>></view>
|
||||
</view>
|
||||
<view class="game_content">
|
||||
<view class="game_list" :class="{game_list2:index%3 === 1}" v-for="(item,index) in listData" :key="index" @tap="goPath('/gameDtail?id='+item.id)">
|
||||
<image class="game_img" :src="item.image[0].file_path" mode="heightFix"></image>
|
||||
<view class="game_name">{{item.name}}</view>
|
||||
<view class="game_spec">
|
||||
<!-- 使用v-html渲染富文本 -->
|
||||
<view v-html="item.desc"></view>
|
||||
<!-- <rich-text :nodes="item.desc"></rich-text> -->
|
||||
</view>
|
||||
<view class="gamex"></view>
|
||||
<view class="game_stars">
|
||||
<view class="game_star">
|
||||
<text class="iconfont icon-star" :class="{'icon-h':item.score>0}"></text>
|
||||
<text class="iconfont icon-star" :class="{'icon-h':item.score>1}"></text>
|
||||
<text class="iconfont icon-star" :class="{'icon-h':item.score>2}"></text>
|
||||
<text class="iconfont icon-star" :class="{'icon-h':item.score>3}"></text>
|
||||
<text class="iconfont icon-star" :class="{'icon-h':item.score>4}"></text>
|
||||
<text class="star_text">{{item.score+'.0'}}</text>
|
||||
</view>
|
||||
<view class="go_url" @tap="goPath('/gameDtail?id='+item.id)">
|
||||
<!-- 进入官网>> -->
|
||||
查看详情
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Layout from './part/layout.vue';
|
||||
export default {
|
||||
components:{
|
||||
Layout
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
list: [],
|
||||
listData: [],
|
||||
|
||||
newsList: [],
|
||||
currentIndex: 0,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getArticle();
|
||||
this.getArticleH();
|
||||
this.getGame();
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
methods:{
|
||||
getArticleH(category_id=2,list_rows=4){
|
||||
this._get('plus.article.article/index',{
|
||||
page: 1,
|
||||
list_rows: list_rows,
|
||||
category_id: category_id,
|
||||
is_home: 1,
|
||||
},res=>{
|
||||
if(res.code==1){
|
||||
this.list = res.data.list.data;
|
||||
console.log(this.list,22)
|
||||
}
|
||||
})
|
||||
},
|
||||
getArticle(category_id=2,list_rows=4){
|
||||
this._get('plus.article.article/index',{
|
||||
page: 1,
|
||||
list_rows: list_rows,
|
||||
category_id: category_id,
|
||||
},res=>{
|
||||
if(res.code==1){
|
||||
this.newsList = res.data.list.data;
|
||||
}
|
||||
})
|
||||
},
|
||||
getGame(category_id=2,list_rows=6){
|
||||
this._get('game.index/index',{
|
||||
page: 1,
|
||||
list_rows: list_rows,
|
||||
},res=>{
|
||||
if(res.code==1){
|
||||
this.listData = res.data.list.game.data;
|
||||
// this.list = res.data.list.top.data;
|
||||
// console.log(this.list,222)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 鼠标移入事件
|
||||
mouseover(e){
|
||||
this.is_xuan = false;
|
||||
},
|
||||
// 鼠标移出事件
|
||||
mouseleave(e){
|
||||
this.is_xuan = true;
|
||||
},
|
||||
change(e){
|
||||
this.currentIndex = e.detail.current;
|
||||
},
|
||||
changeSub(){
|
||||
if(this.currentIndex<=0){
|
||||
this.currentIndex = this.storeList.length-1;
|
||||
}else{
|
||||
this.currentIndex--;
|
||||
}
|
||||
},
|
||||
changeAdd(){
|
||||
if(this.currentIndex>=(this.storeList.length-1)){
|
||||
this.currentIndex = 0;
|
||||
}else{
|
||||
this.currentIndex++;
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content_index{
|
||||
min-height: 500px;
|
||||
.news_index{
|
||||
position: absolute;
|
||||
width: 1366px;
|
||||
height: 462px;
|
||||
margin-top: -462px;
|
||||
margin-left: 279px;
|
||||
display: flex;
|
||||
}
|
||||
.index_swiper{
|
||||
width: 625px;
|
||||
height: 463px;
|
||||
.index_swipers{
|
||||
width: 100%;
|
||||
height: 463px;
|
||||
}
|
||||
.banner-imgs{
|
||||
width: 624px;
|
||||
height: 463px;
|
||||
}
|
||||
.gname{
|
||||
width:625px;
|
||||
height: 53px;
|
||||
background: #131313;
|
||||
opacity: 0.78;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
.names{
|
||||
width:80%;
|
||||
color: #ffffff;
|
||||
line-height: 53px;
|
||||
margin-left: 27px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
::v-deep .uni-swiper-dots { // 指示点整个区域
|
||||
left: 90% !important;
|
||||
bottom: 18px !important;
|
||||
}
|
||||
::v-deep .uni-swiper-dot{
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.index_news{
|
||||
width: 640px;
|
||||
background: #3C3C3C;
|
||||
opacity: 0.88;
|
||||
padding: 40px 60px 40px 40px;
|
||||
|
||||
.index_news_list{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #727272;
|
||||
cursor: pointer;
|
||||
.index_news_name{
|
||||
width: 501px;
|
||||
height: 77px;
|
||||
font-size: 21px;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.news_name{
|
||||
margin-left: 10px;
|
||||
width: 301px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.news_dian{
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
background: #F48612;
|
||||
}
|
||||
.news_date{
|
||||
width: 120px;
|
||||
font-size: 19px;
|
||||
font-weight: 400;
|
||||
color: #E4E4E4;
|
||||
line-height: 40px;
|
||||
text-align: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
.news_one .index_news_name{
|
||||
width: 740px !important;
|
||||
}
|
||||
.news_one .news_name{
|
||||
width: 640px !important;
|
||||
margin-bottom: 28px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #F48612;
|
||||
line-height: 40px;
|
||||
white-space: inherit !important;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.more_news{
|
||||
width: 144px;
|
||||
height: 33px;
|
||||
border: 1px solid #F48612;
|
||||
border-radius: 17px;
|
||||
margin: 40px auto;
|
||||
text-align: center;
|
||||
line-height: 33px;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.good_game{
|
||||
width: 100%;
|
||||
min-height: 800px;
|
||||
.c_game{
|
||||
padding: 71px 160px 47px 160px;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content: space-between;
|
||||
.tj{
|
||||
width: 284px;
|
||||
height: 78px;
|
||||
}
|
||||
.more{
|
||||
width: 124px;
|
||||
height: 33px;
|
||||
border: 1px solid #F48612;
|
||||
border-radius: 17px;
|
||||
font-size: 19px;
|
||||
font-weight: 400;
|
||||
color: #F48612;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.game_content{
|
||||
display: flex;
|
||||
padding: 0 160px;
|
||||
width:1600px;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 80px;
|
||||
min-height: 1200px;
|
||||
.game_list{
|
||||
width: 509px;
|
||||
height: 486px;
|
||||
background: #3C3C3C;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 37px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
.game_list2{
|
||||
margin: 0 36px;
|
||||
}
|
||||
.game_img{
|
||||
width: 509px;
|
||||
height: 286px;
|
||||
// background-image: url('/static/img/index/news.png');
|
||||
// background-size: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.game_img:hover {
|
||||
transform: scale(1.05) translate(0%, 0%);
|
||||
z-index: 999;
|
||||
}
|
||||
.game_name{
|
||||
margin-top: 12px;
|
||||
padding:0 25px;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 40px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
}
|
||||
.game_spec{
|
||||
margin:0 25px;
|
||||
height: 46px;
|
||||
font-size: 19px;
|
||||
font-weight: 400;
|
||||
color: #9E9E9E;
|
||||
line-height: 24px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
|
||||
}
|
||||
.gamex{
|
||||
width: 100%;
|
||||
padding-bottom: 27px;
|
||||
border-bottom: 1px solid #727272;
|
||||
}
|
||||
.game_stars{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin:12px 25px;
|
||||
.game_star{
|
||||
.icon-star{
|
||||
color: #727272;
|
||||
font-size: 20px;
|
||||
}
|
||||
.icon-h{
|
||||
color: #F48612 !important;
|
||||
}
|
||||
.star_text{
|
||||
font-size: 19px;
|
||||
font-weight: 400;
|
||||
color: #F48612;
|
||||
line-height: 24px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
.go_url{
|
||||
width: 124px;
|
||||
height: 33px;
|
||||
border: 1px solid #F48612;
|
||||
border-radius: 17px;
|
||||
font-size: 19px;
|
||||
font-weight: 400;
|
||||
color: #F48612;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user