Browse Source

首页,课程列表页UI修改

chanyi2.0
yanghao 3 years ago
parent
commit
bcdb86f31c
  1. 489
      pages/course/index.vue
  2. 108
      pages/home/components/ArticleList.vue
  3. 124
      pages/home/components/CourseList.vue
  4. 412
      pages/home/components/FirstNewProduct.vue
  5. 54
      pages/home/components/ListTitleBox.vue
  6. 95
      pages/home/components/StadyList.vue
  7. 7
      pages/home/index-copy.vue
  8. 1529
      pages/home/index.vue
  9. BIN
      static/bangdanbg.png
  10. BIN
      static/idx-icon1.png
  11. BIN
      static/ji.png
  12. BIN
      static/tit1.png
  13. BIN
      static/tit2.png
  14. BIN
      static/tit3.png
  15. BIN
      static/tit4.png
  16. BIN
      static/tit5.png
  17. BIN
      static/tit6.png
  18. BIN
      static/yi.png

489
pages/course/index.vue

@ -1,46 +1,31 @@
<template>
<view class="konwledge-index index">
<!-- <view class="header header-search acea-row row-center-wrapper"> -->
<!-- <view @click="goGoodSearch()" class="search acea-row row-middle">
<text class="iconfont icon-xiazai5"></text>
搜索商品
</view> -->
<!-- #ifndef H5 -->
<!-- <view class="qr" @click="startQr()" v-if="$deviceType !== 'weixin'">
<image src="../../static/saoyisao-icon.png" />
</view> -->
<!-- #endif -->
<!-- </view> -->
<view class="content-box">
<view class="tab-box" :class="isFixedTop ? 'fixed' : ''">
<!-- <wuc-tab :tab-list="tabList" :tabCur.sync="TabCur" @change="tabChange"
tab-class="text-center text-black bg-white" select-class="text-orange text-xl">
</wuc-tab> -->
<view class="tabs">
<scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation :scroll-left='scrollLeft'>
<view class="tab-item scroll-item" :class="index == tabSelect ? 'tab-item-active' : ''"
v-for="(item,index) in tabList" :key="item.id"
@click="tabChange(item,index)">{{item.categoryName}}</view>
<view class="tab-item scroll-item" :class="index == tabSelect ? 'tab-item-active' : ''" v-for="(item,index) in tabList"
:key="item.id" @click="tabChange(item,index)">{{item.categoryName}}</view>
</scroll-view>
</view>
<SecondMenu :menuList="secondMenu" :active.sync="active" @secondMenuClick="secondMenuClick" v-if="secondMenu.length > 0">
</SecondMenu>
</view>
<view class="bangdan-box" v-if="studyList.length > 0">
<view class="active-word">打卡榜</view>
<view class="active-word"><image src="../../static/tit5.png" mode=""></image></view>
<view class="bangdan-list">
<scroll-view class="scroll-view_H" scroll-x="true" v-if="studyList.length > 0">
<view class="bangdan-item"
:class="index%2 !== 0 ? 'bgR' : ''"
v-for="(item,index) in studyList" :key="index"
@click="toStudyDetail(item.id)">
<scroll-view class="scroll-view_H" scroll-x="true" v-if="studyList.length > 0">
<view class="bangdan-item" v-for="(item,index) in studyList" :key="index"
@click="toStudyDetail(item.id)">
<view>
<view>{{item.listName}}</view>
<view class="name">{{item.listName}}</view>
<view class="time">{{item.listStartTime.split(' ')[0]}} {{item.listEndTime.split(' ')[0]}}</view>
</view>
<view class="acea-row row-between-wrapper" style="width: 100%;margin-top: 30rpx;">
<view class="jifen">{{item.integral}}积分</view>
<view class="jifen">
<text class="fz44">{{item.integral}}</text>
积分
</view>
<view class="signin-btn">报名参加</view>
</view>
</view>
@ -49,7 +34,7 @@
</view>
</view>
<view class="knowledge-list">
<view class="active-word">课程</view>
<view class="active-word2"><image src="../../static/tit6.png"></image></view>
<view class="no-content" v-if="courseList.length == 0">暂无内容...</view>
<view class="knowledge-item acea-row" v-for="(item,index) in courseList" :key="index" @click="toDetail(item.id)">
<view class="img-box">
@ -76,7 +61,12 @@
<script>
import WucTab from '@/components/wuc-tab/wuc-tab.vue';
import SecondMenu from '../knowledge/components/secondMenu.vue';
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import {
mapState,
mapGetters,
mapMutations,
mapActions
} from 'vuex'
import {
getCategory,
getArticle,
@ -87,17 +77,17 @@
computed: mapGetters(['userInfo']),
data() {
return {
windowWidth:'',
windowWidth: '',
isFixedTop: false,
currentTab:null,
tabSelect:0,
scrollLeft:200,
currentTab: null,
tabSelect: 0,
scrollLeft: 200,
tabList: [],
secondMenu: [],
active: null,
courseList: [],
studyList:[],
categoryTitle:'',
studyList: [],
categoryTitle: '',
}
},
components: {
@ -108,7 +98,7 @@
//
uni.createSelectorQuery().select('.tab-box').boundingClientRect((res) => {
if (res && res.top > 0) {
this.tabInitTop= res.top;
this.tabInitTop = res.top;
}
}).exec();
getCategory().then((res) => {
@ -118,8 +108,8 @@
this.categoryTitle = res.data[0].categoryName;
if (res.data[0].categoryList.length > 0) {
this.$set(this, 'active', res.data[0].categoryList[0].id)
this.categoryTitle = this.categoryTitle +'·'+res.data[0].categoryList[0].categoryName
} else{
this.categoryTitle = this.categoryTitle + '·' + res.data[0].categoryList[0].categoryName
} else {
// this.$set(this, 'tabSelect', 0)
// this.scrollLeft = 0
}
@ -133,15 +123,15 @@
},
mounted() {
uni.getSystemInfo({
success:(res)=>{
success: (res) => {
this.windowWidth = res.windowWidth;
}
})
},
methods: {
onPageScroll(res) {
let scrollTop = res.scrollTop;
var isSatisfy = scrollTop >= this.tabInitTop? true : false;
let scrollTop = res.scrollTop;
var isSatisfy = scrollTop >= this.tabInitTop ? true : false;
//
if (this.isFixedTop === isSatisfy) {
return false;
@ -166,11 +156,14 @@
},
getStudyList() {
uni.showLoading({
title:'正在加载中...'
title: '正在加载中...'
})
var cid = null;
this.active == null ? cid = this.currentTab.id : cid = this.active
getStudyList({categoryId: cid,listState:0}).then((res) => {
getStudyList({
categoryId: cid,
listState: 0
}).then((res) => {
if (res.success) {
this.studyList = res.data
}
@ -179,11 +172,14 @@
},
getCourses() {
uni.showLoading({
title:'正在加载中...'
title: '正在加载中...'
})
var cid = null;
this.active == null ? cid = this.currentTab.id : cid = this.active
getCourses({categoryId: cid,listState:0}).then((res) => {
getCourses({
categoryId: cid,
listState: 0
}).then((res) => {
if (res.success) {
this.courseList = res.data
}
@ -191,7 +187,7 @@
uni.stopPullDownRefresh()
})
},
tabChange(item,index) {
tabChange(item, index) {
this.tabSelect = index
this.currentTab = item
this.moveTo(index)
@ -208,18 +204,18 @@
moveTo(index) {
const query = uni.createSelectorQuery().in(this)
query.selectAll(`.scroll-item`).boundingClientRect(rect => {
const windowWidth = this.windowWidth //
let width = 0
//
for (let i = 0; i < index; i++) {
width += rect[i].width
}
// 0
if (width > windowWidth / 2) {
this.scrollLeft = width + rect[index].width / 2 - windowWidth / 2
} else {
this.scrollLeft = 0
}
const windowWidth = this.windowWidth //
let width = 0
//
for (let i = 0; i < index; i++) {
width += rect[i].width
}
// 0
if (width > windowWidth / 2) {
this.scrollLeft = width + rect[index].width / 2 - windowWidth / 2
} else {
this.scrollLeft = 0
}
}).exec()
},
secondMenuClick(item) {
@ -237,204 +233,233 @@
</script>
<style scoped lang="less">
.header{
.qr {
width: 36rpx;
height: 38rpx;
image{
width: 36rpx;
height: 38rpx;
}
}
}
.header-search {
transition: all linear 0.3s;
background: #fff;
.search {
border: 2rpx solid #EA533E;
background-color: #fff;
page{
background: #fff;
}
}
.colG{
color: #8FB85B !important;
}
.content-box{
width: 100%;
box-sizing: border-box;
.tab-box{
box-shadow: 0px 6px 12px 0px rgba(227,227,227,0.29);
.tabs{
width:auto;
.content-box {
width: 100%;
box-sizing: border-box;
.tab-box {
height: 96rpx;
padding-left: 20rpx;
background: #fff;
.scroll-view_H{
white-space: nowrap;
width: 100%;
height: 96rpx;
}
.tab-item{
box-shadow: 0px 6px 12px 0px rgba(227, 227, 227, 0.29);
.tabs{
width:100%;
height: 96rpx;
line-height: 96rpx;
display: inline-block;
margin-right: 40rpx;
font-size: 32rpx;
color: #999999;
}
.tab-item-active{
color: #F99C10;
border-bottom: 2px solid #F99C10;
font-weight: bold;
padding-left: 20rpx;
position: fixed;
top: 0;
background: #fff;
z-index: 10;
.scroll-view_H{
white-space: nowrap;
width: 100%;
height: 96rpx;
}
.tab-item{
height: 96rpx;
line-height: 96rpx;
display: inline-block;
margin-right: 40rpx;
font-size: 32rpx;
color: #999999;
}
.tab-item-active{
color: #F99C10;
border-bottom: 2px solid #F99C10;
font-weight: bold;
}
}
}
/deep/.second-menu-box {
padding: 30rpx 32rpx;
}
.fixed {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 99;
}
}
/deep/.second-menu-box{
padding: 30rpx 32rpx;
.active-word {
image {
width: 136rpx;
height: 46rpx;
}
}
.fixed{
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 99;
.active-word2{
image{
width: 108rpx;
height: 46rpx;
}
}
}
.active-word{
font-size: 34rpx;
}
.no-content{
font-size: 28rpx;
color: #666666;
text-align: center;
padding: 30rpx 0;
}
.bangdan-box{
width: 100%;
box-sizing: border-box;
padding-left: 30rpx;
margin-top: 30rpx;
.scroll-view_H{
white-space: nowrap;
width: 100%;
.no-content {
font-size: 28rpx;
color: #666666;
text-align: center;
padding: 30rpx 0;
}
.bangdan-list{
padding: 16rpx 0 0;
}
.bangdan-item{
width: 514rpx;
height: 234rpx;
box-sizing: border-box;
padding: 20rpx;
color: #fff;
display: inline-block;
background: linear-gradient(165deg, #3ABFB8 0%, #7CE1DD 100%);
border-radius: 10rpx;
font-size: 34rpx;
margin-right: 20rpx;
display: inline-block;
.time{
font-size: 24rpx;
color: #FFFFFF;
line-height: 40rpx;
margin:10rpx 0 18rpx;
.bangdan-box {
width: 100%;
box-sizing: border-box;
padding-left: 30rpx;
margin: 80rpx 0;
.scroll-view_H {
white-space: nowrap;
width: 100%;
}
.jifen{
font-size: 46rpx;
font-weight: 500;
.bangdan-list {
padding: 16rpx 0 0;
}
.signin-btn{
width: 180rpx;
height: 68rpx;
background: #FFFFFF;
border-radius: 40rpx;
text-align: center;
line-height: 68rpx;
color: #222222;
font-size: 26rpx;
.bangdan-item {
width: 412rpx;
height: 224rpx;
box-sizing: border-box;
padding: 34rpx;
color: #191919;
display: inline-block;
background: url('https://download.cyjyyjy.com/bangdanbg.png');
background-size: 100% 100%;
font-size: 28rpx;
margin-right: 20rpx;
display: inline-block;
.name{
font-weight: bold;
}
.time {
font-size: 24rpx;
line-height: 34rpx;
margin: 8rpx 0 10rpx;
}
.jifen {
font-size: 24rpx;
font-weight: 500;
color: #FCB047;
.fz44{
font-size: 44rpx;
}
}
.signin-btn {
width: 122rpx;
height: 48rpx;
background: linear-gradient(180deg, #FEECCB 0%, #FCAB3B 100%);
border-radius: 8rpx;
text-align: center;
line-height: 48rpx;
font-size: 24rpx;
color: #fff;
}
}
}
.bgR{
background: linear-gradient(165deg, #FF7563 0%, #FEABA0 100%);
}
}
.konwledge-index {
min-height: 100%;
width: 100%;
background: #fff;
.knowledge-list {
.konwledge-index {
min-height: 100%;
width: 100%;
padding:0 32rpx;
margin-top: 30rpx;
.knowledge-item {
background: #fff;
padding: 16rpx 0;
border-bottom: 1px solid #ECECEC;
.img-box {
width: 204rpx;
height: 200rpx;
margin-right: 30rpx;
image {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
}
.knowledge-info-box {
width: calc(100% - 234rpx);
.title {
font-size: 32rpx;
color: #333;
font-size: 500;
line-height: 40rpx;
}
.time,.address{
color: #999;
font-size: 24rpx;
margin-top: 5rpx;
line-height: 34rpx;
}
.intro {
font-size: 28rpx;
color: #999999;
line-height: 40rpx;
margin: 8rpx 0 36rpx;
}
.type-box {
font-size: 24rpx;
color: #999;
margin-top: 20rpx;
.price{
font-size: 28rpx;
color: #EA533E;
background: #fff;
.knowledge-list {
width: 100%;
padding: 0 32rpx;
margin-top: 80rpx;
.knowledge-item {
width: 100%;
height: 208rpx;
margin-top: 20rpx;
background: #fff;
border-bottom: 1rpx solid #ECECEC;
position: relative;
.img-box {
width: 204rpx;
height: 200rpx;
margin-right: 30rpx;
image {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.signin-btn{
width: 156rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
background: #FFEAE7;
border-radius: 12rpx;
font-size: 32rpx;
}
.knowledge-info-box {
width: calc(100% - 234rpx);
.title {
font-size: 38rpx;
color: #333;
font-size: 500;
line-height: 52rpx;
}
.red{
background: #FFEAE7;
color: #EE7060;
.time,
.address {
color: #999;
font-size: 28rpx;
margin: 10rpx 0;
line-height: 38rpx;
}
.blue {
color: #6E85EB;
background: #ECEFFD;
.intro {
font-size: 28rpx;
color: #999999;
line-height: 40rpx;
margin: 8rpx 0 36rpx;
}
.yellow {
color: #F99C10;
background: #FFEDCC;
.type-box {
font-size: 24rpx;
color: #999;
margin-top: 20rpx;
.price {
font-size: 28rpx;
color: #EA533E;
}
.signin-btn {
width: 156rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
background: #FFEAE7;
border-radius: 12rpx;
font-size: 32rpx;
position: absolute;
right: 4rpx;
bottom: 4rpx;
}
.red {
background: #FFEAE7;
color: #EE7060;
}
.blue {
color: #6E85EB;
background: #ECEFFD;
}
.yellow {
color: #F99C10;
background: #FFEDCC;
}
}
}
}
}
.knowledge-item:nth-last-child(1){
border: none;
.knowledge-item:nth-last-child(1) {
border: none;
}
}
}
}
</style>

108
pages/home/components/ArticleList.vue

@ -0,0 +1,108 @@
<template>
<view class="article-list">
<view class="article-item" v-for="(item,index) in list" :key="index" @click="toArticleDetail(item.id)">
<image :src="item.imageInput" mode="aspectFill"></image>
<view class="article-content">
<view class="article-title line1">{{item.title}}</view>
<view class="article-desc line1">{{item.synopsis}}</view>
<view class="author-box acea-row row-between">
<view class="acea-row">
<view class="author">{{item.author}}</view>
<view class="time">{{item.addTime.split(' ')[0]}}</view>
<view>{{item.visit}}人阅读</view>
</view>
<view class="tips"
:class="item.chargeType == 0 ? 'free-bg' : item.chargeType == 1 ? '' : 'jifen'">
{{item.chargeType == 0 ? '免费' : item.chargeType == 1 ? '收费' : '积分'}}
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default{
props:{
list: {
type: Array,
default: []
}
},
methods:{
toArticleDetail(id){
this.$yrouter.push({
path: '/pages/knowledge/detail',
query: {
id:id,
},
})
},
}
}
</script>
<style lang="less">
.article-list{
width: 100%;
margin-top: 20rpx;
.article-item{
width: 100%;
background: #fff;
box-sizing: border-box;
margin-bottom: 52rpx;
box-shadow: 0px 2rpx 8rpx rgba(0, 0, 0, 0.16);
image{
width: 100%;
height: 266rpx;
border-radius: 10rpx;
margin-bottom: 20rpx;
}
.article-content{
padding: 28rpx 32rpx;
}
.article-title{
font-size: 36rpx;
font-weight: 500;
color: #333333;
line-height: 50rpx;
margin-bottom: 8rpx;
}
.article-desc{
font-size: 24rpx;
font-weight: 400;
color: #999999;
line-height: 40rpx;
margin-bottom: 30rpx;
}
.author-box{
font-size: 24rpx;
color: #999;
.author{
color: #EA533E;
}
.time{
margin: 0 12rpx;
}
.tips{
width: 100rpx;
font-size: 20rpx;
color: #FFAD3A;
height: 34rpx;
text-align: center;
line-height: 34rpx;
background: #fcd391;
border-radius: 44rpx;
}
.free-bg{
background: #8FB85B;
color: #D7FFA4;
}
.jifen{
background: #AAC8FA;
color: #5693F9;
}
}
}
}
</style>

124
pages/home/components/CourseList.vue

@ -0,0 +1,124 @@
<template>
<view class="recommend-list-box acea-row row-between">
<view class="recommend-item" v-for="(item,index) in list" :key="index" @click="toCourseDetail(item.id)">
<view class="img-box"><image :src="item.coverImg" mode="aspectFill"></image></view>
<view class="course-content">
<view class="course-title line1">{{item.courseName}}</view>
<view class="course-tips-box acea-row">
<view class="course-tip-item blue">{{item.categoryName}}</view>
</view>
<!-- <view class="price" v-if="item.level > 2">{{item.level}}级课程</view>
<view class="price" v-if="item.level == 2">{{item.courseCharge}}</view>
<view class="price colG" v-if="item.chargeType == 0 || item.level == 1">免费</view> -->
<view class="course-address acea-row row-between-wrapper">
<view class="address">{{item.coursePlace}}</view>
<view class="course-time">{{item.enterStartTime}}-{{item.enterEndTime}}</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default{
props: {
list: {
type: Array,
default: []
}
},
data(){
return {
titImg: '../../../static/tit1.png',
titleWord: '查看更多课程'
}
},
methods:{
toCourseDetail(id){
this.$yrouter.push({
path: '/pages/course/detail',
query: {
id:id,
},
})
},
seeMoreClick(){
uni.switchTab({
url: "/pages/course/index"
})
},
}
}
</script>
<style lang="less">
.recommend-list-box{
width: 100%;
.recommend-item{
width: 334rpx;
background: #fff;
border-radius: 10rpx;
font-size: 28rpx;
color: #333;
margin-right: 22rpx;
margin-bottom: 22rpx;
box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.16);
image{
width: 334rpx;
height: 216rpx;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
}
.course-content{
width: 100%;
box-sizing: border-box;
padding:0 10rpx 20rpx;
}
.course-title{
line-height: 40rpx;
}
.course-tips-box{
margin: 12rpx 0 24rpx;
font-size: 24rpx;
color: #999;
.course-tip-item{
min-width: 60rpx;
height: 34rpx;
line-height: 32rpx;
text-align: center;
background: #EDEFF8;
border-radius: 4rpx;
border: 1px solid #6E85EB;
padding: 0 6rpx;
font-size: 22rpx;
margin-right: 20rpx;
box-sizing: border-box;
margin-right: 10rpx;
}
.blue{
color: #6E85EB;
background: #EDEFF8;
border-color: #6E85EB;
}
.yellow{
color: #F99C10;
background: #FFEDCC;
border-color: #F99C10;
}
}
.price{
font-size: 32rpx;
color: #EA533E;
font-weight: 500;
margin: 16rpx 0;
}
.course-address{
font-size: 24rpx;
color: #999999;
}
}
.recommend-item:nth-child(2n){
margin-right: 0;
}
}
</style>

412
pages/home/components/FirstNewProduct.vue

@ -1,216 +1,214 @@
<template>
<view class="group-goods pa20 mx20 mb10" v-if="detail.length>0">
<view class="title-box x-bc" @tap="$yrouter.push({ path: '/pages/shop/HotNewGoods/index',query:{type:3} })">
<text class="title">首发新品</text>
<view class="group-people x-f">
<text class="tip">更多</text>
<text class="cuIcon-right"></text>
</view>
</view>
<view class="goods-box swiper-box x-f">
<swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000">
<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item">
<view class="goods-list-box x-f">
<block v-for="mgoods in goods" :key="mgoods.id">
<view class="min-goods"
@tap="$yrouter.push({ path: '/pages/shop/GoodsCon/index',query:{id:mgoods.id} })">
<view class="img-box">
<view class="tag">new</view>
<image class="img" :src="mgoods.image" mode="widthFix"></image>
</view>
<view class="price-box">
<view class="y-f">
<text class="seckill-current">{{ mgoods.price }}</text>
<text class="original">销量{{ mgoods.sales }}{{mgoods.unitName}}</text>
</view>
</view>
<view class="title">
<slot name="titleText"></slot>
</view>
</view>
</block>
</view>
</swiper-item>
</swiper>
<view class="swiper-dots" v-if="goodsList.length > 1">
<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length"
:key="index"></text>
</view>
</view>
</view>
<view class="group-goods pa20 mx20 mb10" v-if="detail.length>0">
<view class="title-box x-bc" @tap="$yrouter.push({ path: '/pages/shop/HotNewGoods/index',query:{type:3} })">
<text class="title">首发新品</text>
<view class="group-people x-f">
<text class="tip">更多</text>
<text class="cuIcon-right"></text>
</view>
</view>
<view class="goods-box swiper-box x-f">
<swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000">
<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item">
<view class="goods-list-box x-f">
<block v-for="mgoods in goods" :key="mgoods.id">
<view class="min-goods" @tap="$yrouter.push({ path: '/pages/shop/GoodsCon/index',query:{id:mgoods.id} })">
<view class="img-box">
<view class="tag">new</view>
<image class="img" :src="mgoods.image" mode="widthFix"></image>
</view>
<view class="price-box">
<view class="y-f">
<text class="seckill-current">{{ mgoods.price }}</text>
<text class="original">销量{{ mgoods.sales }}{{mgoods.unitName}}</text>
</view>
</view>
<view class="title">
<slot name="titleText"></slot>
</view>
</view>
</block>
</view>
</swiper-item>
</swiper>
<view class="swiper-dots" v-if="goodsList.length > 1">
<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length" :key="index"></text>
</view>
</view>
</view>
</template>
<script>
import shActivityGoods from '@/components/sh-activity-goods.vue';
export default {
name: "FirstNewProduct",
components: {
shActivityGoods
},
data() {
return {
goodsList: [],
swiperCurrent: 0
};
},
props: {
detail: Array
},
computed: {},
created() {},
watch: {
detail(next) {
this.goodsList = this.sortData(next, 4);
}
},
methods: {
swiperChange(e) {
this.swiperCurrent = e.detail.current;
},
//
sortData(oArr, length) {
let arr = [];
let minArr = [];
oArr.forEach(c => {
if (minArr.length === length) {
minArr = [];
}
if (minArr.length === 0) {
arr.push(minArr);
}
minArr.push(c);
});
return arr;
},
jump(path, query) {
this.$yrouter.push({
path,
query,
});
},
}
}
import shActivityGoods from '@/components/sh-activity-goods.vue';
export default {
name: "FirstNewProduct",
components: {
shActivityGoods
},
data() {
return {
goodsList: [],
swiperCurrent: 0
};
},
props: {
detail: Array
},
computed: {},
created() {},
watch: {
detail(next) {
this.goodsList = this.sortData(next, 4);
}
},
methods: {
swiperChange(e) {
this.swiperCurrent = e.detail.current;
},
//
sortData(oArr, length) {
let arr = [];
let minArr = [];
oArr.forEach(c => {
if (minArr.length === length) {
minArr = [];
}
if (minArr.length === 0) {
arr.push(minArr);
}
minArr.push(c);
});
return arr;
},
jump(path, query) {
this.$yrouter.push({
path,
query,
});
},
}
}
</script>
<style lang="scss" scoped>
.group-goods {
position: relative;
z-index: 9;
}
.swiper-box,
.carousel {
width: 700rpx;
height: 240upx;
position: relative;
border-radius: 20rpx;
.carousel-item {
width: 100%;
height: 100%;
// padding: 0 28upx;
overflow: hidden;
}
.swiper-image {
width: 100%;
height: 100%;
// border-radius: 10upx;
background: #ccc;
}
}
.swiper-dots {
display: flex;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0rpx;
z-index: 66;
.dot {
width: 45rpx;
height: 3rpx;
background: #eee;
border-radius: 50%;
margin-right: 10rpx;
}
.dot-active {
width: 45rpx;
height: 3rpx;
background: #a8700d;
border-radius: 50%;
margin-right: 10rpx;
}
}
// +
.group-goods {
background: #fff;
border-radius: 20rpx;
overflow: hidden;
.title-box {
padding-bottom: 20rpx;
.title {
font-size: 32rpx;
font-weight: bold;
}
.group-people {
.time-box {
font-size: 26rpx;
color: #edbf62;
.count-text-box {
width: 30rpx;
height: 34rpx;
background: #edbf62;
text-align: center;
line-height: 34rpx;
font-size: 24rpx;
border-radius: 6rpx;
color: rgba(#fff, 0.9);
margin: 0 8rpx;
}
}
.head-box {
.head-img {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
background: #ccc;
}
}
.tip {
font-size: 28rpx;
padding-left: 30rpx;
color: #666;
}
.cuIcon-right {
font-size: 30rpx;
line-height: 28rpx;
color: #666;
}
}
}
.goods-box {
.goods-item {
margin-right: 22rpx;
&:nth-child(4n) {
margin-right: 0;
}
}
}
}
.group-goods {
position: relative;
z-index: 9;
}
.swiper-box,
.carousel {
width: 700rpx;
height: 240upx;
position: relative;
border-radius: 20rpx;
.carousel-item {
width: 100%;
height: 100%;
// padding: 0 28upx;
overflow: hidden;
}
.swiper-image {
width: 100%;
height: 100%;
// border-radius: 10upx;
background: #ccc;
}
}
.swiper-dots {
display: flex;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0rpx;
z-index: 66;
.dot {
width: 45rpx;
height: 3rpx;
background: #eee;
border-radius: 50%;
margin-right: 10rpx;
}
.dot-active {
width: 45rpx;
height: 3rpx;
background: #a8700d;
border-radius: 50%;
margin-right: 10rpx;
}
}
// +
.group-goods {
background: #fff;
border-radius: 20rpx;
overflow: hidden;
.title-box {
padding-bottom: 20rpx;
.title {
font-size: 32rpx;
font-weight: bold;
}
.group-people {
.time-box {
font-size: 26rpx;
color: #edbf62;
.count-text-box {
width: 30rpx;
height: 34rpx;
background: #edbf62;
text-align: center;
line-height: 34rpx;
font-size: 24rpx;
border-radius: 6rpx;
color: rgba(#fff, 0.9);
margin: 0 8rpx;
}
}
.head-box {
.head-img {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
background: #ccc;
}
}
.tip {
font-size: 28rpx;
padding-left: 30rpx;
color: #666;
}
.cuIcon-right {
font-size: 30rpx;
line-height: 28rpx;
color: #666;
}
}
}
.goods-box {
.goods-item {
margin-right: 22rpx;
&:nth-child(4n) {
margin-right: 0;
}
}
}
}
</style>

54
pages/home/components/ListTitleBox.vue

@ -0,0 +1,54 @@
<template>
<view class="title-box acea-row row-between-wrapper">
<view class="title"><image :src="titImg"></image></view>
<view class="more" @click="seeMoreClick">{{titWord}}</view>
</view>
</template>
<script>
export default{
name: 'ListTitleBox',
props:{
//
titImg:{
type: String,
default: ''
},
//
titWord: {
type: String,
default: ''
},
//
width: {
type: String,
default: ''
},
height: {
type: String,
default: ''
}
},
methods:{
seeMoreClick(){
this.$emit('seeMoreClick')
}
}
}
</script>
<style lang="less">
.title-box{
width: 100%;
margin-bottom: 28rpx;
image{
width: 206rpx;
height: 58rpx;
}
.more{
font-size: 28rpx;
color: #999;
}
}
</style>

95
pages/home/components/StadyList.vue

@ -0,0 +1,95 @@
<template>
<view class="study-list uni-padding-wrap uni-common-mt">
<scroll-view class="scroll-view_H" scroll-x="true">
<view class="study-item scroll-view-item_H" v-for="(item,index) in list" :key="index" @click="toStudyDetail(item.id)">
<view class="day-box acea-row row-middle">
<image src="../../../static/date-icon.png" v-if="index%2 == 0"></image>
<image src="../../../static/date-icon2.png" v-if="index%2 != 0"></image>
<text>{{item.clockTimes}}</text>
</view>
<view class="study-content">
<view class="study-title line1">{{item.listName}}</view>
<view class="study-time acea-row-nowrap row-between-wrapper">
<view>{{item.listStartTime}}开始</view>
<view>{{item.enterNum}}人已参与</view>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default{
props:{
list: {
type: Array,
default: []
}
},
methods:{
toStudyDetail(id){
this.$yrouter.push({
path: '/pages/study/detail',
query: {
id:id,
},
})
},
}
}
</script>
<style lang="less">
.study-list{
width: 100%;
.scroll-view_H{
white-space: nowrap;
width: 100%;
}
.study-item{
width: 334rpx;
height: 180rpx;
display: inline-block;
background: linear-gradient(143deg, #FDAF97 0%, #ED5E48 100%);
box-shadow: 0px 4rpx 8rpx 4rpx rgba(250,194,183,0.32);
border-radius: 10rpx;
margin-right: 20rpx;
.day-box{
color: #E73D21;
font-size: 48rpx;
line-height: 58rpx;
margin-left: 10rpx;
image{
width: 34rpx;
height: 34rpx;
margin-right: 10rpx;
}
}
.study-content{
width: calc(100% - 12rpx);
background: #fff;
font-size: 24rpx;
color: #999;
box-shadow: 0px 4rpx 8rpx 4rpx rgba(250,194,183,0.32);
border-radius: 10rpx;
margin: 2rpx auto;
padding:16rpx 10rpx 10rpx;
box-sizing: border-box;
.study-title{
font-size: 28rpx;
font-weight: 500;
color: #222222;
line-height: 40rpx;
margin-bottom: 12rpx;
}
}
}
.study-item:nth-child(2n){
background: linear-gradient(143deg, #C4DBFF 0%, #7FAAF2 100%);
.day-box{
color: #557AB3;
}
}
}
</style>

7
pages/home/index-copy.vue

@ -12,13 +12,6 @@
<!-- #endif -->
</view>
<view v-for="(item, index) in homeData" :key="index">
<!-- <view class="head_box" v-if="item.type == 'header'" :style="{ background: bgcolor }" :class="{ active: bgcolor }">
<cu-custom :isBack="true" :bgColor="bgcolor">
<block slot="backText">
<text class="nav-title shopro-selector-rect">{{ item.componentContent.title }}</text>
</block>
</cu-custom>
</view> -->
<Banner v-if="item.type == 'banner'" :detail="item.componentContent.bannerData" @getbgcolor="getbgcolor"></Banner>
<uni-notice-bar v-if="item.type == 'noticeBar'" scrollable="true" @click="goRoll(item.componentContent.roll[0])" single="true" :speed="10" showIcon="true" :text="item.componentContent.roll[0].info"></uni-notice-bar>
<view class="content_box home_content_box" v-if="item.type == 'menu' && item.componentContent.menus">

1529
pages/home/index.vue

File diff suppressed because it is too large Load Diff

BIN
static/bangdanbg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
static/idx-icon1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
static/ji.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/tit1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
static/tit2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
static/tit3.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

BIN
static/tit4.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
static/tit5.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
static/tit6.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
static/yi.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Loading…
Cancel
Save