Skip to content

html / h5wandahuijia

Go to a project
Commit 086c2d96 by mamingqun
Options

修改了入围奖样式

parent 8c5aec3b
Showing with 566 additions and 20 deletions
src/components/Description.vue
......@@ -85,7 +85,7 @@
<span>人气奖</span>
<span>10名</span>
</div>
<div class="prize lightBlue">2张万达影院电影票</div>
<div class="prize lightBlue">万达影院电影票2张</div>
</div>
</div>
<!-- <div class="text3">
......
src/pages/index/Shouye.vue
......@@ -90,8 +90,8 @@
</div>
</div>
<!-- 入围奖 -->
<div class="contentBox ruweipaihang ruweijiang" v-if="tabActive === 4">
<div class="subContent" id="ruweijiangBox" ref="ruweijiangBox">
<div class="contentBox ruweipaihang ruweijiang" ref='ruweiBox' v-if="tabActive === 4">
<!-- <div class="subContent" id="ruweijiangBox" ref="ruweijiangBox">
<vue-waterfall-easy
ref="lastContent"
v-if="ruwei"
......@@ -104,7 +104,8 @@
</div>
<div slot="waterfall-over">没有更多了~</div>
</vue-waterfall-easy>
</div>
</div>-->
<ruwei></ruwei>
</div>
</div>
<div class="joinus" v-show="tabActive !== 3">
......@@ -134,6 +135,8 @@ import store from '../../modules/store';
import wx from 'weixin-js-sdk';
import TypeBox from '../../components/TypeBox';
import ruwei from './ruwei.vue';
import api from '@/modules/js/api.js';
export default {
......@@ -211,7 +214,7 @@ export default {
this.getUserInfo();
this.fucengButton = localStorage.getItem("fucengButton") ? 'close' : 'open';
// this.getRuweiList();
this.getRuweiList();
// this.hiddenBar();
},
......@@ -417,15 +420,6 @@ export default {
});
},
getPrizeList() {
// axios
// .get(
// '/contest/award/list?activity_id=' +
// this.$store.state.activeInfo.id
// )
// .then(res => {
// this.huojiang = res.data.data.data;
// this.huojingTitle = res.data.data.title;
// });
axios.get('/contest/award/list/time').then(res => {
// console.log('prizeList');
......@@ -475,9 +469,9 @@ export default {
this.lastAllLoaded = true;
this.ruweidot = { backgroundColor: 'transparent' };
Toast({
// message: '没有更多'
});
// Toast({
// message: '没有更多'
// });
return
}
......@@ -794,7 +788,8 @@ export default {
vueWaterfallEasy,
PrizeBox,
TypeBox,
Fuceng
Fuceng,
ruwei
},
beforeRouteLeave(to, from, next) {
try {
......@@ -824,7 +819,8 @@ export default {
}
try {
var ruweiY = $('.ruweijiang .vue-waterfall-easy-scroll').scrollTop();
// var ruweiY = $('.ruweijiang .vue-waterfall-easy-scroll').scrollTop();
var ruweiY = this.$refs.ruweiBox.scrollTop;
store.commit('changeRuweiBoxScrollY', ruweiY);
} catch (error) {
......@@ -854,7 +850,8 @@ export default {
try {
var ys = this.$store.state.ruweiBoxScroll;
var ruweiY = $('.ruweijiang .vue-waterfall-easy-scroll').scrollTop(ys);
// var ruweiY = $('.ruweijiang .vue-waterfall-easy-scroll').scrollTop(ys);
this.$refs.ruweiBox.scrollTop = ys;
} catch (error) {
}
......
src/pages/index/ruwei.vue 0 → 100644
<template>
<div class="ruweiBox">
<div class="prizeList">
<div class="content">
<div class="newBox">
<div class="topBox123">
<div class="title">
<!-- <div class="mainTitle">云上丹寨摄影月赛<br> <span>1月份入围作品</span></div> -->
<div class="mainTitle">1月份入围作品公告</div>
</div>
</div>
<ul class="listArr">
<li class="middleBox">
<p>一月份参赛作品征集：
<span class="jiacu">1月1日-1月20日</span>
</p>
<p>一月份入围作品公布：
<span class="jiacu">1月25日</span>
</p>
<p>一月份获奖作品公布：
<span class="jiacu">1月31日</span>&nbsp;(敬请关注)
</p>
<!-- <p class="fontSize24">(敬请关注)</p> -->
<p
class="lineHeight150"
>云上丹寨摄影月赛，每月从参赛作品中由专业评委选出20幅照片作为入围作品（排名不分先后），公示一周后，每月月底由评委再选出金银铜奖各一幅，各获奖金1万、5千、3千。当月点赞最多的作品颁发最具人气奖，奖金1千。</p>
</li>
</ul>
<div class="bottomBox"></div>
</div>
</div>
</div>
<ul class="contentBox123" v-if="ruwei">
<li v-for="(item, index) in ruwei" :key="index">
<router-link tag="a" class="bigA" :to="{path:'/detail',query:{id:item.id}}">
<div class="detailInfo">
<div class="author">No.{{index + 1}}《{{item.desc}}》</div>
<!-- <div class="title">作品：{{item.title}}</div> -->
</div>
<img :src="item.image" alt>
<!-- <img v-lazy="item.image" alt> -->
<div class="pictureInfo">
<!-- <div class="text">{{item.desc}}</div> -->
<div class="text">作者：{{item.nickname}}</div>
<div class="dianzan">{{item.point_num}}</div>
</div>
</router-link>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
import CardPrize from '../../components/CardPrize';
import $ from 'jquery';
import { clearTimeout } from 'timers';
export default {
data() {
return {
ruwei: '',
ruweiPage: 1,
ruweiPhotoTypeActive: 0,
ruweiList: []
}
},
created() {
// this.getRuweiList();
},
mounted() {
this.getData();
},
methods: {
async getData() {
var data = '1'
while (data.length) {
data = await this.getRuweiList();
console.log('data');
console.log(data);
this.ruweiList.push(data);
}
},
getRuweiList(type) {
return new Promise((reslove, reject) => {
var photoType = type || 0;
// var photoType = 1;
axios
.get('/contest/selected/list', {
params: {
page: this.ruweiPage,
type: photoType
}
})
.then(res => {
// console.log('入围res');
// console.log(res);
var arr = res.data.data.data;
var newArr = this.addSrc(arr);
reslove(newArr);
var totalPage = Math.ceil(
res.data.data.count / res.data.data.size
);
// if (arr.length === 0) {
// return;
// }
// if (Number(res.data.data.page) === Number(totalPage)) {
// this.lastAllLoaded = true;
// this.ruweidot = { backgroundColor: 'transparent' };
// setTimeout(() => {
// Toast({
// message: '没有更多'
// });
// }, 2000);
// }
if (res.data.data.data.length === 0) {
this.lastAllLoaded = true;
this.ruweidot = { backgroundColor: 'transparent' };
// Toast({
// message: '没有更多'
// });
return
}
if (this.ruwei) {
this.ruwei = this.ruwei.concat(newArr);
} else {
this.ruwei = newArr;
}
this.ruweiPage++;
});
});
},
addSrc(arr) {
arr.forEach(ele => {
ele['src'] = ele.image;
});
return arr;
},
},
components: {
CardPrize
}
}
</script>
<style lang="scss" scoped>
.prizeList {
width: 710px;
// height: 1450px;
background: white;
border-radius: 5px;
margin: 20px auto 30px;
// box-shadow: 0px 0px 15px #888888;
margin-bottom: 30px;
.lineHeight150 {
line-height: 40px;
font-size: 25px;
padding-left: 100px;
padding-right: 100px;
text-align: justify;
margin-top: 40px;
}
.jiacu {
font-weight: bold;
color: #49392d;
}
.fontSize24 {
font-size: 27px;
margin-top: 30px;
margin-bottom: 30px;
text-align: left;
font-weight: bold;
color: #49392d;
}
p {
padding-left: 90px;
padding-right: 90px;
margin-bottom: 15px;
font-size: 27px;
}
.content {
width: 100%;
height: 100%;
// background: url('~@/pages/index/assets/images/borderBg.png') no-repeat;
// background-size: 100% auto;
padding: 1px;
}
.newBox {
.topBox123 {
height: 140px;
background: url("~@/pages/index/assets/images/topBar.png") no-repeat;
background-size: 100% auto;
padding: 1px;
// padding-bottom: 30px;
box-sizing: content-box;
.title {
.mainTitle {
text-align: center;
color: #49392d;
font-size: 36px;
margin-top: 60px;
margin-bottom: 10px;
letter-spacing: 3px;
font-weight: bold;
line-height: 50px;
span {
font-size: 32px;
}
}
.subTitle {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
letter-spacing: 1px;
margin-top: 15px;
.clock {
width: 18px;
height: 18px;
background: url("~@/pages/index/assets/images/shizhong.png")
no-repeat;
background-size: 100% 100%;
}
.text {
font-size: 22px;
position: relative;
// top:-1px;
}
}
}
}
.middleBox {
background: url("~@/pages/index/assets/images/middleBar.png")
repeat-y;
background-size: 100% auto;
}
.listArr {
// margin-top: 20px;
.wrap {
width: 580px;
display: flex;
flex-direction: row;
justify-content: space-around;
box-sizing: content-box;
margin: 0 auto;
}
li {
font-size: 28px;
padding-bottom: 20px;
.zuoBig {
font-size: 30px;
font-weight: bold;
color: #544336;
padding-bottom: 10px;
box-sizing: content-box;
}
.zuo {
width: 150px;
// background: red;
text-align: center;
}
.zhong {
width: 300px;
// background: green;
text-align: center;
white-space: nowrap;
}
.you {
width: 210px;
// background: yellow;
text-align: center;
}
}
}
.bottomBox {
height: 75px;
background: url("~@/pages/index/assets/images/bottomBar.png")
no-repeat bottom;
background-size: 100% auto;
}
}
}
.ruweiBox {
width: 710px;
background: white;
border-radius: 5px;
margin: 0 auto;
box-shadow: 0px 0px 15px #888888;
margin-bottom: 50px;
.titileBox {
height: 145px;
padding-left: 26px;
display: flex;
flex-direction: row;
align-items: center;
.imgbox {
width: 82px;
height: 92px;
}
.prize1 {
background: url("~@/pages/index/assets/images/prize1.png") no-repeat;
background-size: 100% auto;
}
.prize2 {
background: url("~@/pages/index/assets/images/prize2.png") no-repeat;
background-size: 100% auto;
}
.prize3 {
background: url("~@/pages/index/assets/images/prize3.png") no-repeat;
background-size: 100% auto;
}
.prize4 {
background: url("~@/pages/index/assets/images/prize4.png") no-repeat;
background-size: 100% auto;
}
.prize5 {
background: url("~@/pages/index/assets/images/prize5.png") no-repeat;
background-size: 100% auto;
}
.jinjiang {
background: url("~@/pages/index/assets/images/jinjiang.png")
no-repeat;
background-size: 100% auto;
}
.yinjiang {
background: url("~@/pages/index/assets/images/yinjiang.png")
no-repeat;
background-size: 100% auto;
}
.tongjiang {
background: url("~@/pages/index/assets/images/tongjiang.png")
no-repeat;
background-size: 100% auto;
}
.text {
font-size: 48px;
font-weight: bold;
margin-left: 20px;
}
}
.contentBox123 {
li {
width: 678px;
margin: 0 auto;
position: relative;
margin-bottom: 40px;
.detailInfo {
height: 60px;
line-height: 60px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
// background: red;
.author {
width: 580px;
font-size: 28px;
color: black;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 10px;
}
.title {
font-size: 28px;
color: black;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
img {
width: 100%;
}
.pictureInfo {
height: 60px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding-left: 20px;
padding-right: 20px;
position: absolute;
width: 100%;
bottom: 8px;
background: rgba($color: #000000, $alpha: 0.8);
color: white;
.text {
font-size: 24px;
max-width: 500px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dianzan {
font-size: 21px;
height: 60px;
line-height: 60px;
position: relative;
}
.dianzan::before {
content: "";
display: block;
width: 24px;
height: 24px;
background: url("~@/pages/index/assets/images/xinbai.png")
no-repeat;
background-size: 100% auto;
position: absolute;
left: -35px;
top: 50%;
margin-top: -12px;
}
}
}
}
.contentBox456 {
width: 678px;
height: 540px;
background: white;
margin: 0 auto 15px;
// display: inline-flex;
display: flex;
flex-direction: row;
overflow-x: scroll;
overflow-y: hidden;
img {
height: 100%;
width: auto;
// position:absolute;
// top:0;
// bottom:0;
// left:0;
}
li {
display: inline-block;
position: relative;
// width: 100%;
// padding-bottom:100%;
// float: left;
.abiaoqian {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
.pictureInfo {
height: 60px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding-left: 20px;
padding-right: 20px;
position: absolute;
width: 100%;
bottom: 0;
background: rgba($color: #000000, $alpha: 0.8);
color: white;
.text {
font-size: 24px;
max-width: 500px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dianzan {
font-size: 21px;
height: 60px;
line-height: 60px;
position: relative;
}
.dianzan::before {
content: "";
display: block;
width: 24px;
height: 24px;
background: url("~@/pages/index/assets/images/xinbai.png")
no-repeat;
background-size: 100% auto;
position: absolute;
left: -35px;
top: 50%;
margin-top: -12px;
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment