Browse Source

refactor(coach/home): 重构教练首页

- 移除了大部分原有代码,包括模板、脚本和样式
- 添加了新的模板结构,分为三个部分
-优化了样式,使用了less和scoped属性
master
liutong 1 year ago
parent
commit
67d6b41b65
  1. 2
      pages.json
  2. 173
      pages/coach/home/index.vue
  3. 7
      pages/student/index/index.vue

2
pages.json

@ -57,7 +57,7 @@
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black"
}
},
}
],
"globalStyle": {

173
pages/coach/home/index.vue

@ -1,71 +1,24 @@
<template>
<view>
<view class="top">
<view class="top_1">发现</view>
<view class="top_2" @click="publishing"><fui-icon name="plussign" size="80" fontWeight="Number"></fui-icon></view>
<view class="section_1">
<view class="text_box">
<text>月授课数</text>
<text>12</text>
<text>月负责学员</text>
<text>188</text>
<text></text>
</view>
<view style="position: relative;" class="middle" v-for="(item, index) in list" :key="index" v-if="list.length > 0">
<view class="middles">
<view class="middles_1" v-if="item.headimg">
<image class="middles_1_img" :src="item.headimg"></image>
</view>
<view class="middles_1" v-else>
<image class="middles_1_img" src="/static/images/home/tixing.png"></image>
</view>
<view class="middles_2">
<view class="middles_info1">{{item.user}}</view>
<view class="middles_info2">{{item.timedifference}}</view>
</view>
</view>
<view class="shoucang" style="border: 5rpx #f8627f solid;color: #f8627f;" v-if="item.collections == 1" @click="collection(item.id,um_id)">收藏</view>
<view class="shoucang" style="border: 5rpx #ccc solid;" v-else @click="collection(item.id,um_id)">收藏</view>
<view @click="coninfo(item)" style="height: 300rpx;width: 100%;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;">
<view class="middles_con">
{{item.activity}}
</view>
<view class="middles_con" v-if="item.imagesnum!=0">
<view>
<view style="width: 32%;height: 200rpx;display: inline-block;margin:2rpx;" v-for="(item1, index) in item.images" :key="index">
<image :src="item1" style="width: 100%;height: 100%;"></image>
</view>
</view>
</view>
<view class="middles_con">
{{item.content}}
</view>
</view>
<view class="middles_con" style="font-size: 20rpx;color: #ccc;" @click="coninfo(item)">
点击内容查看详情
</view>
<view class="middles_bom">
<view class="middles_bom_1 middles_boms" v-if="item.area">{{item.area}}</view>
<view class="middles_bom_2 middles_boms">
<fui-icon name="fabulous-fill" color="#f8627f" size="45" @click="like(item.id,item.um_id)"></fui-icon>
{{item.likes}}
</view>
<view class="middles_bom_3 middles_boms" @click="Comment(item.id)">
<fui-icon name="comment-fill" color="#6281a6" size="45"></fui-icon>
{{item.comment}}
</view>
</view>
<view style="width: 100%;height: 20rpx;"></view>
</view>
<view class="empty" v-if="!list.length">
<view style="width: 200rpx;">
<img src="@/static/icon-img/kkry.png" alt="" style="width: 180rpx;height: 180rpx;">
<view style="font-size: 28rpx;font-weight: 800;color: #00be8c;">
还没有任何提醒
</view>
</view>
</view>
<view style="width: 100%;height: 20rpx;"></view>
<view class="section_2"></view>
<view class="section_3"></view>
<view class="section_3"></view>
</view>
</template>
<script>
import user from '@/api/user.js';
import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
export default {
components: {
fuiIcon
@ -180,102 +133,16 @@
}
</script>
<style>
.empty {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
height: 85vh;
align-items: center;
}
.top{
background-color: #fff;
height: 100rpx;
width: 100%;
}
.top_1{
display: inline-block;
font-size: 55rpx;
font-weight: bold;
margin-left: 30rpx;
line-height: 100rpx;
}
.top_2{
margin-left: 600rpx;
position: absolute;
top: 15rpx;
}
.middle{
width: 95%;
background-color: #fff;
margin: auto;
margin-top: 20rpx;
border-radius: 10rpx;
}
.middles{
height: 150rpx;
/* background-color: aqua; */
margin-top: 20rpx;
}
.middles_1{
height: 100%;
width: 24%;
/* background-color: red; */
display: inline-block;
}
.middles_2{
width: 70%;
/* background-color: green; */
display: inline-block;
position: relative;
top: -15%;
left: 2%;
}
.middles_1_img{
width: 130rpx;
height: 130rpx;
margin-left: 12%;
border-radius: 100rpx;
margin-top: 6%;
}
.middles_info1{
font-size: 40rpx;
font-weight: bold;
}
.middles_info2{
color: #5e5e5e;
}
.middles_con{
width: 92%;
margin: 20rpx auto;
font-size: 30rpx;
}
.middles_bom{
padding: 30rpx 0 40rpx 25rpx;
position: relative;
}
.middles_boms{
display: inline-block;
color: #9297b2;
}
.middles_bom_2{
position: absolute;
right: 30%;
}
.middles_bom_3{
position: absolute;
right: 10%;
<style lang="less" scoped>
.section_1{
border: 1px solid red;
width: 700rpx;
height: 264rpx;
border-radius: 14rpx;
.text_box{
}
.shoucang{
position: absolute;
right: 10%;
top: 10%;
height: 60rpx;
width: 140rpx;
border-radius: 10rpx;
line-height: 54rpx;
text-align: center;
}
</style>

7
pages/student/index/index.vue

@ -1,8 +1,5 @@
<template>
<view>
<<<<<<< HEAD
<AQTabber></AQTabber>
=======
<view class="top">
<view class="top_1">发现</view>
<view class="top_2" @click="publishing"><fui-icon name="plussign" size="80" fontWeight="Number"></fui-icon></view>
@ -65,7 +62,6 @@
<view style="width: 100%;height: 20rpx;"></view>
<AQTabber/>
>>>>>>> d89f93ea456d0a15a017b476c9df62a3b4c831ed
</view>
</template>
@ -84,8 +80,6 @@
}
},
onLoad() {
<<<<<<< HEAD
=======
const um_id = uni.getStorageSync('um_id');
this.um_id = um_id
if (um_id == '') {
@ -94,7 +88,6 @@
})
}
this.fetchData(this.um_id)
>>>>>>> d89f93ea456d0a15a017b476c9df62a3b4c831ed
},
methods: {
// fetchData(um_id) {

Loading…
Cancel
Save