You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
zhishifufei_uniapp/components/RecommendQuestion/index.vue

342 lines
7.2 KiB

<template>
<view class="recommend-question">
<view>
{{ obj.title }}
<navigator hover-class="none" url="/pages/topic/question_category?type=2">
查看更多<text class="iconfont iconxiangyou"></text>
</navigator>
</view>
<view v-if="obj.typesetting === 4" id="swiper6" class="swiper-container">
<view class="swiper-wrapper">
<view v-for="item in obj.list" :key="item.id" class="swiper-slide ques-view" style="margin-right: 20rpx;margin-top: 0;">
<navigator hover-class="none" style="width: 620rpx;" url="" @click="jumpProblem(item)">
<view>
<image class="figure" mode="aspectFill" :src="item.image" />
</view>
<view class="attr">
<view class="title">{{ item.title }}</view>
<view class="people">{{ item.count }}人已答题</view>
<view class="group">
<view v-if="item.pay_type" class="money">
¥<text>{{ item.money }}</text>
</view>
<view v-else class="money free">免费</view>
<view class="link">
<image :src="getImgPath( '/wap/first/zsff/images/question08.png')" />答题
</view>
</view>
</view>
</navigator>
</view>
</view>
</view>
<view v-else :class="{ gird: obj.typesetting === 2, small: obj.typesetting === 3 }" style="padding: 30rpx 20rpx;">
<view v-for="item in obj.list" :key="item.id" class="ques-view">
<navigator hover-class="none" class="navigator" url="" @click="jumpProblem(item)" >
<view >
<image class="figure" mode="aspectFill" :src="item.image" />
</view>
<view class="attr">
<view class="title">{{ item.title }}</view>
<view v-if="obj.typesetting === 2" class="people">
{{ item.answer }}人已答题
</view>
<view v-if="obj.typesetting === 3 && item.pay_type" class="money">
¥<text>{{ item.money }}</text>
</view>
<view v-if="obj.typesetting === 3 && !item.pay_type" class="money free">
免费
</view>
<view class="group">
<view v-if="obj.typesetting !== 3 && item.pay_type" class="money">
¥<text>{{ item.money }}</text>
</view>
<view v-if="obj.typesetting !== 3 && !item.pay_type" class="money free">
免费
</view>
<view v-if="obj.typesetting !== 2" class="people">
{{ item.answer }}人已答题
</view>
<view class="link">
<image :src="getImgPath( '/wap/first/zsff/images/question08.png')" />答题
</view>
</view>
</view>
</navigator>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
obj: {
type: Object,
default: function () {
return {};
},
},
},
data: function () {
return {
};
},
mounted: function () {
},
methods: {
jumpProblem(item) {
this.$util.checkLogin(() => {
uni.navigateTo({
url: `/pages/special/question_index?id=${item.id}`
})
}, true);
}
}
};
</script>
<style scoped>
.recommend-question {
margin-top: 14rpx;
/* background-color: #ffffff; */
}
.recommend-question > view:first-child {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 15rpx;
padding-right: 20rpx;
padding-left: 20rpx;
font-weight: bold;
font-size: 32rpx;
color: #333;
margin-left: 20rpx;
}
.recommend-question > view:first-child navigator {
font-weight: normal;
font-size: 22rpx;
color: #999999;
margin-right: 25rpx;
}
.recommend-question .iconxiangyou {
margin-left: 9rpx;
font-size: 18rpx;
}
.recommend-question .swiper-container {
padding: 30rpx 20rpx 50rpx;
background: #ffffff;
width: 686rpx;
margin: auto;
border-radius: 24rpx;
}
/* .recommend-question .swiper-slide > navigator {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 520rpx;
height: 490rpx;
border-radius: 10rpx;
overflow: hidden;
box-shadow: 0 3rpx 2rpx rgba(0, 0, 0, .07);
} */
.recommend-question .swiper-slide {
width: 620rpx;
}
.recommend-question .swiper-slide navigator {
display: flex;
padding: 20rpx;
border-radius: 12rpx;
/* box-shadow: 0 3rpx 20rpx rgba(0, 0, 0, 0.07); */
}
.recommend-question .swiper-slide .figure {
width: 300rpx;
height: 169rpx;
}
.recommend-question .swiper-slide .attr {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 0;
height: auto;
padding-top: 0;
margin-left: 20rpx;
}
.recommend-question .swiper-slide .group {
justify-content: space-between;
}
/* .recommend-question .gird{
margin-top: 30rpx;
} */
.recommend-question .ques-view~.ques-view {
margin-top: 30rpx;
}
.recommend-question .figure {
display: block;
width: 100%;
height: 380rpx;
border-radius: 10rpx;
object-fit: cover;
-webkit-touch-callout: none;
pointer-events: none;
}
.recommend-question .title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 28rpx;
color: #333;
}
.recommend-question .people {
font-size: 22rpx;
color: #999999;
}
.recommend-question .money {
font-weight: bold;
font-size: 22rpx;
color: #ff6b00;
}
.recommend-question .money text {
font-size: 32rpx;
}
.recommend-question .free {
font-size: 28rpx;
}
.recommend-question .link {
height: 38rpx;
padding-right: 17rpx;
padding-left: 17rpx;
border-radius: 19rpx;
background-color: #f2f8ff;
font-size: 22rpx;
line-height: 38rpx;
color: #2c8eff;
}
.recommend-question .link image {
width: 17rpx;
height: 19rpx;
margin-right: 10rpx;
-webkit-touch-callout: none;
pointer-events: none;
}
.recommend-question .attr {
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: justify;
justify-content: space-between;
height: 112rpx;
padding-top: 13rpx;
}
.recommend-question .group {
display: flex;
align-items: center;
}
.recommend-question .group .people {
flex: 1;
margin-left: 22rpx;
}
.recommend-question .small view > .navigator {
display: flex;
}
.recommend-question .small .figure {
width: 250rpx;
height: 141rpx;
}
.recommend-question .small .attr {
flex: 1;
min-width: 0;
height: auto;
padding-top: 0;
margin-left: 24rpx;
}
.recommend-question .small .people {
margin-left: 0;
}
.recommend-question .gird {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding-top: 0;
}
/* .recommend-question .gird view {
width: 345rpx;
margin-top: 30rpx;
} */
.recommend-question .gird .figure {
width: 345rpx;
height: 192rpx;
}
.recommend-question .gird .attr {
height: 151rpx;
}
.recommend-question .gird .group {
justify-content: space-between;
}
.swiper-wrapper{
overflow:auto;
background: #fbfbfb;
border-radius: 24rpx;
}
</style>