我是个攻城狮
406 lines
9.4 KiB
Vue
406 lines
9.4 KiB
Vue
<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>
|