UI更改
This commit is contained in:
parent
1e581dda5f
commit
2572f8273f
|
|
@ -142,7 +142,7 @@
|
|||
{ // 新鲜事/话题/分类
|
||||
"path": "pages/news/news-topic-cate",
|
||||
"style": {
|
||||
"navigationBarTitleText": "话题分类",
|
||||
"navigationBarTitleText": "分类",
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
|
|
@ -373,13 +373,13 @@
|
|||
"iconWidth": "24px",
|
||||
"list": [{
|
||||
"pagePath": "pages/home/home",
|
||||
"text": "招聘",
|
||||
"text": "首页",
|
||||
"iconPath": "/static/img/tabbar/home.png",
|
||||
"selectedIconPath": "/static/img/tabbar/home-ed.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/news/news",
|
||||
"text": "培训",
|
||||
"text": "课程",
|
||||
"iconPath": "/static/img/tabbar/news.png",
|
||||
"selectedIconPath": "/static/img/tabbar/news-ed.png"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -35,7 +35,8 @@
|
|||
<slot>
|
||||
<view class="relative flex flex-row justify-center items-center">
|
||||
<!-- 图片 -->
|
||||
<image class="w-full rounded-20" :src="info.coverPic" mode="widthFix" lazy-load @click="goDetail()">
|
||||
<image class="rounded-20" style="width: 100%; height: 300rpx !important;" :src="info.coverPic"
|
||||
mode="aspectFill" lazy-load @click="goDetail()">
|
||||
</image>
|
||||
<template v-if="info.type === 'video'">
|
||||
<!-- 视频 -->
|
||||
|
|
@ -47,7 +48,7 @@
|
|||
</view>
|
||||
</slot>
|
||||
<!-- 点赞、评论 -->
|
||||
<view class="flex flex-row justify-between items-center text-gray-500 my-10">
|
||||
<!-- <view class="flex flex-row justify-between items-center text-gray-500 my-10">
|
||||
<view class="flex flex-row justify-center items-center">
|
||||
<view class="flex flex-row justify-center items-center mr-20" @click.stop="handleMark('smile')">
|
||||
<view class="iconfont mr-10 text-36" :class="[handleIcon('smile',info.infoNum)]"></view>
|
||||
|
|
@ -68,7 +69,7 @@
|
|||
{{info.shareNum}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -153,7 +154,23 @@
|
|||
goDetail() {
|
||||
if (this.isDetail) return // 详情页，不跳转
|
||||
this.$u.route('pages/home/detail', {
|
||||
data: JSON.stringify(this.info)
|
||||
data: JSON.stringify({
|
||||
age: 30,
|
||||
commentNum: 388,
|
||||
coverPic: "/static/img/list/01.jpg",
|
||||
infoNum: {
|
||||
cryNum: 2,
|
||||
index: 0,
|
||||
smileNum: 13
|
||||
},
|
||||
isFollow: false,
|
||||
sex: 1,
|
||||
shareNum: 32,
|
||||
title: "做一件有价值的事情，坚持下去等待时间的回报吧！",
|
||||
type: "img",
|
||||
userPic: "/static/img/header/a.svg",
|
||||
username: "芒种"
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,13 +12,12 @@
|
|||
@click="handlePreview(index)"></image>
|
||||
</view>
|
||||
</info-list>
|
||||
<u-gap height="20" bgColor="#F9FAFB"></u-gap>
|
||||
<!-- <u-gap height="20" bgColor="#F9FAFB"></u-gap>
|
||||
<view class="p-20 text-30 font-bold">
|
||||
最新评论<text class="ml-10">3</text>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- 评论列表 -->
|
||||
<view class="comment">
|
||||
<!-- 头像 -->
|
||||
<!-- <view class="comment">
|
||||
<image class="rounded-full mr-20" src="../../static/img/header/a.svg" mode="aspectFill"
|
||||
style="width: 100rpx;height: 100rpx;"></image>
|
||||
<view class="flex-1 flex flex-col">
|
||||
|
|
@ -40,13 +39,13 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- 分享功能 -->
|
||||
<popup-share :show.sync="showShare"></popup-share>
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="bottom-input">
|
||||
<!-- <view class="bottom-input">
|
||||
</view>
|
||||
<bottom-input v-if="showComment" @submit="submit"></bottom-input>
|
||||
<bottom-input v-if="showComment" @submit="submit"></bottom-input> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -67,6 +66,7 @@
|
|||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
console.log(e);
|
||||
e.data && this.init(JSON.parse(e.data))
|
||||
},
|
||||
// 监听原生标题栏按钮点击事件
|
||||
|
|
@ -179,4 +179,4 @@
|
|||
height: 100rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
@ -1,242 +1,250 @@
|
|||
<template>
|
||||
<!-- 首页 -->
|
||||
<view class="home">
|
||||
<!-- 小程序导航栏 -->
|
||||
<!-- 新鲜事页 -->
|
||||
<view class="news">
|
||||
<!-- 导航栏 -->
|
||||
<!-- <u-navbar placeholder>
|
||||
<view slot="left"></view>
|
||||
<view slot="center" class="nav-center">
|
||||
<view :class="{'active':tabIndex === index}" @click="changeTab(index)" v-for="(item,index) in tabList"
|
||||
:key="index">
|
||||
<view class="nav-title">{{item.name}}</view>
|
||||
<view class="active-line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar> -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<u-navbar placeholder>
|
||||
<view slot="left" @click="btn" class="iconfont iconqiandao" style="visibility: hidden;"></view>
|
||||
<view slot="center" class="nav-center">
|
||||
<u-search placeholder="搜索新鲜事" @click="handleSearch()" :showAction="false" disabled></u-search>
|
||||
<u-search placeholder="搜索新鲜事" @click="goSearch()" :showAction="false" disabled></u-search>
|
||||
</view>
|
||||
<!-- <view slot="right" class="iconfont iconPensyumaobi" @click="handlePublish()"></view> -->
|
||||
</u-navbar>
|
||||
<!-- #endif -->
|
||||
<!-- 标签 -->
|
||||
<u-sticky bgColor="#fff">
|
||||
<u-tabs class="wrap-card" ref="tabs" @change="changeTab" :list="tablist" :current="tabIndex"
|
||||
lineColor="#3c9cff" :activeStyle="{color:'#3c9cff'}" :inactiveStyle="{color:'#909399'}" lineWidth="30"
|
||||
:scrollable="false">
|
||||
</u-tabs>
|
||||
</u-sticky>
|
||||
<!-- 列表 -->
|
||||
<swiper class="flex-1" :current="swiperIndex" @animationfinish="animationfinish">
|
||||
<swiper-item class="h-full" v-for="(item, index) in swiperList" :key="index">
|
||||
<scroll-view :ref="'scrollView'+index" :scroll-top="scrollTops[tabIndex]" class="w-full h-full" scroll-y
|
||||
@scrolltolower="reachBottom" @scroll="scroll">
|
||||
<!-- 有内容 -->
|
||||
<template v-if="item.list.length > 0">
|
||||
<!-- 资讯列表 -->
|
||||
<info-list :item="item1" v-for="(item1,index1) in item.list" :key="index1" :index="index1"
|
||||
@mark="handleMark" @follow="handleFollow">
|
||||
</info-list>
|
||||
<u-loadmore :status="loadStatus[tabIndex]"></u-loadmore>
|
||||
</template>
|
||||
<!-- 无内容 -->
|
||||
<template v-else>
|
||||
<u-empty text="本来无一物,何处惹尘埃" icon="/static/img/demo/winter.png" textSize="16" marginTop='25%'
|
||||
mode="list"></u-empty>
|
||||
</template>
|
||||
<!-- 信息列表 -->
|
||||
<swiper class="bg-white px-20 py-20" :style="{height:swiperHeight + 'px'}" :current="tabIndex"
|
||||
@change="changeSwiper">
|
||||
<!-- <swiper-item>
|
||||
<scroll-view scroll-y class="flow h-full" @scrolltolower="reachBottom">
|
||||
<info-list v-for="(item,index) in followList.list" :key="index" :item="item">
|
||||
</info-list>
|
||||
<u-loadmore :status="followList.loadStatus"></u-loadmore>
|
||||
</scroll-view>
|
||||
</swiper-item> -->
|
||||
<!-- 话题 -->
|
||||
<swiper-item>
|
||||
<scroll-view scroll-y class="topic h-full">
|
||||
<!-- 搜索框 -->
|
||||
<!-- <view class="search-input" @click="goSearch">
|
||||
<u-input type="text" placeholder="请输入搜索内容"
|
||||
placeholderClass="iconfont iconsousuo text-28" border="none" inputAlign="center" clearable
|
||||
confirmType="search" disabled>
|
||||
</u-input>
|
||||
</view> -->
|
||||
<!-- 轮播图 -->
|
||||
<u-swiper :list="topicList.swiper" keyName="image" indicator indicatorMode="line" circular
|
||||
height="320rpx" bgColor="#ffffff"></u-swiper>
|
||||
<news-topic-nav title="招聘公告" url=""></news-topic-nav>
|
||||
<view class="last-update">
|
||||
<topic-list v-if='index<=2' :item="item" v-for="(item,index) in topicList.list"
|
||||
:key="index"></topic-list>
|
||||
</view>
|
||||
<news-topic-nav title="技能培训" url=""></news-topic-nav>
|
||||
<view class="last-update">
|
||||
<topic-list v-if='index<=2' :item="item" v-for="(item,index) in topicList.list"
|
||||
:key="index"></topic-list>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- 回到顶部 -->
|
||||
<view v-if="scrollTop[tabIndex] > 400" class="go-top" @click="goTop">
|
||||
<u-icon color="#3c9cff" name="arrow-up" size="24"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
newsList
|
||||
newsList,
|
||||
topicList
|
||||
} from "@/utils/data/data.js"
|
||||
import {
|
||||
register
|
||||
} from '@/api/login.js'
|
||||
import InfoList from "@/pages/home/cpns/info-list.vue"
|
||||
import NewsTopicNav from "@/pages/news/cpns/news-topic-nav.vue"
|
||||
import TopicList from "@/pages/news/cpns/topic-list.vue"
|
||||
export default {
|
||||
components: {
|
||||
InfoList
|
||||
InfoList,
|
||||
NewsTopicNav,
|
||||
TopicList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrollTops: [0, 0, 0, 0, 0, 0],
|
||||
scrollTop: [0, 0, 0, 0, 0, 0],
|
||||
// 加载更多 // loadmore/ loading / nomore
|
||||
loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore', 'loadmore', 'loadmore'],
|
||||
// 标签栏
|
||||
tabIndex: 0,
|
||||
tablist: [{
|
||||
name: "关注"
|
||||
// 导航标签
|
||||
tabIndex: 1,
|
||||
tabList: [{
|
||||
name: "关注",
|
||||
id: 'follow'
|
||||
},
|
||||
{
|
||||
name: "谷雨"
|
||||
},
|
||||
{
|
||||
name: "芒种"
|
||||
},
|
||||
{
|
||||
name: "小满",
|
||||
},
|
||||
{
|
||||
name: "霜降"
|
||||
},
|
||||
{
|
||||
name: "寒露"
|
||||
name: "话题",
|
||||
id: 'topic'
|
||||
}
|
||||
],
|
||||
// 列表数据
|
||||
swiperIndex: 0,
|
||||
swiperList: newsList
|
||||
swiperHeight: 0,
|
||||
// 关注列表
|
||||
followList: {
|
||||
// 加载更多
|
||||
loadStatus: 'loadmore',
|
||||
// 列表数据
|
||||
list: newsList[0].list
|
||||
},
|
||||
// 话题列表
|
||||
topicList: {
|
||||
swiper: [ // 轮播图
|
||||
{
|
||||
image: '/static/img/demo/winter.png',
|
||||
title: '迷人的春天是令人欢欣鼓舞的。'
|
||||
},
|
||||
{
|
||||
image: '/static/img/demo/winter.png',
|
||||
title: '一道残阳铺水中，半江瑟瑟半江红。'
|
||||
},
|
||||
{
|
||||
image: '/static/img/demo/winter.png',
|
||||
title: '金秋的阳光温馨恬静，金秋的微风和煦轻柔。'
|
||||
},
|
||||
{
|
||||
image: '/static/img/demo/winter.png',
|
||||
title: '风吹过，寒气直侵入骨头。'
|
||||
}
|
||||
],
|
||||
|
||||
list: topicList[1].list
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听原生标题栏搜索输入框点击事件
|
||||
onNavigationBarSearchInputClicked() {
|
||||
this.handleSearch()
|
||||
},
|
||||
// 监听原生标题栏按钮点击事件
|
||||
onNavigationBarButtonTap(e) {
|
||||
switch (e.index) {
|
||||
case 1:
|
||||
this.handlePublish()
|
||||
break;
|
||||
}
|
||||
onLoad() {
|
||||
// 设置swiperHeight
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
// 屏幕高度（screenHeight) = 手机状态栏的高度(statusBarHeight) + 导航栏高度(44px) + 可使用窗口高度(windowHeight)
|
||||
// 可使用窗口高度 = swiper高度 + 自定义导航栏高度
|
||||
this.swiperHeight = res.windowHeight - 44
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
btn() {
|
||||
uni.login({
|
||||
success: (res) => {
|
||||
console.log(res);
|
||||
}
|
||||
})
|
||||
// tabbar点击
|
||||
changeTab(index) {
|
||||
this.tabIndex = index
|
||||
},
|
||||
// 发布
|
||||
handlePublish() {
|
||||
this.$u.route('/pages/home/release')
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.$u.route('/pages/home/search', {
|
||||
type: 'info'
|
||||
})
|
||||
},
|
||||
// tab栏切换
|
||||
changeTab(item) {
|
||||
this.tabIndex = item.index
|
||||
this.swiperIndex = item.index
|
||||
},
|
||||
// swiper滑动结束，分别设置tabs和swiper的状态
|
||||
animationfinish(e) {
|
||||
// swiper滑动
|
||||
changeSwiper(e) {
|
||||
this.tabIndex = e.detail.current
|
||||
this.swiperIndex = e.detail.current
|
||||
},
|
||||
// scroll-view到底部加载更多
|
||||
// scroll-view触底
|
||||
reachBottom() {
|
||||
// 是否可加载
|
||||
if (this.loadStatus[this.tabIndex] !== 'loadmore') return
|
||||
// 加载中
|
||||
this.loadStatus.splice(this.tabIndex, 1, "loading")
|
||||
if (this.followList.loadStatus !== 'loadmore') return;
|
||||
// 加载更多
|
||||
this.followList.loadStatus = "loading"
|
||||
setTimeout(() => {
|
||||
this.getList(this.tabIndex)
|
||||
this.getList()
|
||||
}, 1000);
|
||||
},
|
||||
// 获取列表
|
||||
getList(index) {
|
||||
getList(idx) {
|
||||
// 随机添加5条数据
|
||||
for (let i = 0; i < 5; i++) {
|
||||
let curr = this.$u.random(0, this.swiperList[index].list.length - 1)
|
||||
let data = this.swiperList[index].list[curr]
|
||||
this.swiperList[index].list.push(data)
|
||||
let index = this.$u.random(0, this.followList.list.length - 1)
|
||||
let data = JSON.parse(JSON.stringify(this.followList.list[index]))
|
||||
this.followList.list.push(data)
|
||||
}
|
||||
// 加载更多
|
||||
this.loadStatus.splice(this.tabIndex, 1, "nomore")
|
||||
// 更新加载状态
|
||||
this.followList.loadStatus = "nomore"
|
||||
},
|
||||
// 回到顶部
|
||||
scroll(e) {
|
||||
const index = this.tabIndex
|
||||
this.scrollTop.splice(index, 1, e.detail.scrollTop) // 400显示回到顶部
|
||||
},
|
||||
// 回到顶部
|
||||
goTop() {
|
||||
const index = this.tabIndex
|
||||
// 解决view层不同步的问题
|
||||
this.scrollTops.splice(index, 1, this.scrollTop[index])
|
||||
this.$nextTick(function() {
|
||||
this.scrollTops.splice(index, 1, 0)
|
||||
this.scrollTop.splice(index, 1, 0)
|
||||
// 搜索
|
||||
goSearch() {
|
||||
this.$u.route('/pages/home/search', {
|
||||
type: 'topic'
|
||||
})
|
||||
},
|
||||
// 关注
|
||||
handleFollow(item) {
|
||||
this.swiperList[this.swiperIndex].list[item.index].isFollow = item.value
|
||||
const title = item.value ? '关注成功' : '取消成功'
|
||||
uni.showToast({
|
||||
title,
|
||||
icon: 'none',
|
||||
})
|
||||
},
|
||||
// 表情
|
||||
handleMark(item) {
|
||||
let infoNum = this.swiperList[this.swiperIndex].list[item.index].infoNum
|
||||
switch (item.value) {
|
||||
case 'smile':
|
||||
if (infoNum.index == 1) return // 微笑
|
||||
else if (infoNum.index == 2) infoNum.cryNum--
|
||||
infoNum.index = 1
|
||||
infoNum.smileNum++
|
||||
break;
|
||||
case 'cry':
|
||||
if (infoNum.index == 2) return // 踩
|
||||
else if (infoNum.index == 1) infoNum.smileNum--
|
||||
infoNum.index = 2
|
||||
infoNum.cryNum++
|
||||
break
|
||||
}
|
||||
const title = item.value === 'smile' ? '谢谢表扬' : '继续加油'
|
||||
uni.showToast({
|
||||
title,
|
||||
icon: 'none',
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.home {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - var(--window-top) - var(--window-bottom)); // 视高 - 内容区顶部 - 内容区底部
|
||||
width: 100%;
|
||||
.news {
|
||||
|
||||
// 小程序导航栏
|
||||
/* #ifdef MP-WEIXIN */
|
||||
// 导航栏
|
||||
/deep/ .u-navbar {
|
||||
|
||||
.iconfont {
|
||||
font-size: 48rpx;
|
||||
color: $uni-color-green;
|
||||
}
|
||||
|
||||
.nav-center {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.nav-title {
|
||||
width: 60rpx;
|
||||
font-size: 30rpx;
|
||||
padding: 0 15rpx;
|
||||
font-weight: bold;
|
||||
color: $uni-text-color-gray;
|
||||
}
|
||||
|
||||
.active {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.nav-title {
|
||||
color: $uni-color-green;
|
||||
}
|
||||
|
||||
.active-line {
|
||||
border-bottom: 8rpx solid $uni-color-green;
|
||||
border-radius: 20rpx;
|
||||
width: 70rpx;
|
||||
position: absolute;
|
||||
bottom: -10rpx;
|
||||
left: 50%;
|
||||
margin-left: -35rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.u-navbar__content {
|
||||
margin-right: 180rpx !important; // 胶囊按钮
|
||||
padding-right: 180rpx !important; // 胶囊按钮
|
||||
}
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.topic {
|
||||
.search-input {
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
height: 70rpx;
|
||||
background-color: #F4F4F4;
|
||||
border-radius: 10rpx;
|
||||
|
||||
/deep/ .u-input {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.last-update {
|
||||
padding: 0 20rpx 20rpx;
|
||||
|
||||
.last-update-name {
|
||||
font-size: 32rpx;
|
||||
padding-bottom: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 回到顶部
|
||||
.go-top {
|
||||
position: fixed;
|
||||
right: 30rpx;
|
||||
bottom: 100rpx;
|
||||
height: 80rpx;
|
||||
width: 80rpx;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,15 +6,15 @@
|
|||
<!-- 头像栏 -->
|
||||
<view class="flex items-center wrap-card" hover-class="bg-gray-100" @click="$u.route('/pages/mine/set')">
|
||||
<image class="header-img" src="/static/img/header/a.svg" mode=""
|
||||
@click.stop="$u.route('/pages/mine/user-space')"></image>
|
||||
@click.stop="$u.route('/pages/mine/set')"></image>
|
||||
<view class="flex flex-col flex-1 px-20">
|
||||
<text class="text-32 font-bold">MrThinco</text>
|
||||
<text class="text-28 text-gray-500 mt-10">总帖子 38 今日发帖 2</text>
|
||||
<text class="text-28 text-gray-500 mt-10">17729744485</text>
|
||||
</view>
|
||||
<text class="iconfont iconqianjin"></text>
|
||||
</view>
|
||||
<!-- 统计栏 -->
|
||||
<view class="wrap-card flex items-center">
|
||||
<!-- <view class="wrap-card flex items-center">
|
||||
<view v-for="(item,index) in countList" :key="index"
|
||||
class="flex-1 flex flex-col items-center justify-center">
|
||||
<view class="text-32 font-bold">
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- 广告位 -->
|
||||
<view class="wrap-card">
|
||||
<image class="adv-img rounded-20" src="../../static/img/list/01.jpg" mode="aspectFill"></image>
|
||||
|
|
@ -63,23 +63,23 @@
|
|||
],
|
||||
// 设置列表
|
||||
setList: [
|
||||
{
|
||||
icon: 'iconhuiyuan',
|
||||
name: '个人空间',
|
||||
url: 'user-space'
|
||||
},
|
||||
// {
|
||||
// icon: 'iconhuiyuan',
|
||||
// name: '个人空间',
|
||||
// url: 'user-space'
|
||||
// },
|
||||
{
|
||||
icon: 'iconliulan',
|
||||
name: '浏览历史'
|
||||
},
|
||||
{
|
||||
icon: 'iconrenzheng',
|
||||
name: '社区认证'
|
||||
},
|
||||
{
|
||||
icon: 'iconshenhe',
|
||||
name: '审核帖子'
|
||||
},
|
||||
// {
|
||||
// icon: 'iconrenzheng',
|
||||
// name: '社区认证'
|
||||
// },
|
||||
// {
|
||||
// icon: 'iconshenhe',
|
||||
// name: '审核帖子'
|
||||
// },
|
||||
// #ifdef MP-WEIXIN
|
||||
{
|
||||
icon: 'iconshezhi1',
|
||||
|
|
|
|||
|
|
@ -7,18 +7,18 @@
|
|||
</u-cell>
|
||||
</u-cell-group>
|
||||
<!-- 底部操作 -->
|
||||
<view class="wrap-bottom-bar">
|
||||
<!-- <view class="wrap-bottom-bar">
|
||||
<view class="bar-placeholder"></view>
|
||||
<view class="bar-content">
|
||||
<u-button :customStyle="btnStyle" :ripple="true" shape="circle" @click="goPage('logout')">退出</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- 退出 -->
|
||||
<u-modal title="提示" @cancel="logoutShow=false" showCancelButton :show="logoutShow" @confirm="logout"
|
||||
ref="uModal" :asyncClose="true" content="您是否确定要，退出登录?"></u-modal>
|
||||
<!-- <u-modal title="提示" @cancel="logoutShow=false" showCancelButton :show="logoutShow" @confirm="logout"
|
||||
ref="uModal" :asyncClose="true" content="您是否确定要，退出登录?"></u-modal> -->
|
||||
<!-- 注销 -->
|
||||
<u-modal title="提示" @cancel="cancleShow=false" showCancelButton :show="cancleShow" @confirm="cancleShow=false"
|
||||
ref="uModal" :asyncClose="true" content="您是否确定要，注销账号?"></u-modal>
|
||||
<!-- <u-modal title="提示" @cancel="cancleShow=false" showCancelButton :show="cancleShow" @confirm="cancleShow=false"
|
||||
ref="uModal" :asyncClose="true" content="您是否确定要，注销账号?"></u-modal> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -29,34 +29,36 @@
|
|||
logoutShow: false,
|
||||
cancleShow: false,
|
||||
// 设置列表
|
||||
setList: [{
|
||||
name: '账号与安全',
|
||||
url: 'edit-pwd'
|
||||
},
|
||||
{
|
||||
name: '绑定邮箱',
|
||||
url: 'bind-email'
|
||||
},
|
||||
setList: [
|
||||
// {
|
||||
// name: '账号与安全',
|
||||
// url: 'edit-pwd'
|
||||
// },
|
||||
// {
|
||||
// name: '绑定邮箱',
|
||||
// url: 'bind-email'
|
||||
// },
|
||||
{
|
||||
name: '修改资料',
|
||||
url: 'edit-info'
|
||||
},
|
||||
{
|
||||
name: '清除缓存',
|
||||
url: 'clear'
|
||||
},
|
||||
{
|
||||
name: '意见反馈',
|
||||
url: 'feedback'
|
||||
},
|
||||
{
|
||||
name: '关于社区',
|
||||
url: 'about'
|
||||
},
|
||||
{
|
||||
name: '注销账号',
|
||||
url: 'cancle'
|
||||
}
|
||||
// ,
|
||||
// {
|
||||
// name: '清除缓存',
|
||||
// url: 'clear'
|
||||
// },
|
||||
// {
|
||||
// name: '意见反馈',
|
||||
// url: 'feedback'
|
||||
// },
|
||||
// {
|
||||
// name: '关于社区',
|
||||
// url: 'about'
|
||||
// },
|
||||
// {
|
||||
// name: '注销账号',
|
||||
// url: 'cancle'
|
||||
// }
|
||||
],
|
||||
// 按钮配置
|
||||
btnStyle: {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<view class="hot-nav">
|
||||
<view class="flex justify-between column-one">
|
||||
<view class="">热门分类</view>
|
||||
<view class="flex justify-between items-center" @click="goTopicNav()">
|
||||
<view class="">{{title}}</view>
|
||||
<view class="flex justify-between items-center nav" @click="goTopicNav()">
|
||||
更多<view class="iconfont iconqianjin"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -20,17 +20,20 @@
|
|||
* @property {Array} list 列表信息
|
||||
*/
|
||||
export default {
|
||||
props:{
|
||||
list: Array
|
||||
props: {
|
||||
list: Array,
|
||||
title: "",
|
||||
url: ''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 话题分类
|
||||
goTopicNav() {
|
||||
//
|
||||
this.$u.route('/pages/news/news-topic-cate');
|
||||
}
|
||||
}
|
||||
|
|
@ -38,27 +41,34 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hot-nav {
|
||||
// border-top: 1rpx solid #EEEEEE;
|
||||
border-bottom: 1rpx solid #EEEEEE;
|
||||
padding: 20rpx 20rpx 0 20rpx;
|
||||
margin-top: 10rpx;
|
||||
.column-one {
|
||||
margin-bottom: 20rpx;
|
||||
& > view:last-child {
|
||||
.hot-nav {
|
||||
// border-top: 1rpx solid #EEEEEE;
|
||||
border-bottom: 1rpx solid #EEEEEE;
|
||||
padding: 20rpx 20rpx 0 20rpx;
|
||||
margin-top: 10rpx;
|
||||
|
||||
.column-one {
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
&>view:last-child {
|
||||
color: #9b9b9b;
|
||||
}
|
||||
|
||||
&>view:first-child {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.column-two>view {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
background: #f9f9f9;
|
||||
color: #9b9b9b;
|
||||
}
|
||||
& > view:first-child {
|
||||
font-size: 32rpx;
|
||||
border-radius: 10rpx;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
}
|
||||
.column-two > view {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
background: #f9f9f9;
|
||||
color: #9b9b9b;
|
||||
border-radius: 10rpx;
|
||||
margin: 0 10rpx;
|
||||
.nav{
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<!-- 新鲜事/话题列表 -->
|
||||
<view class="topic-list flex items-center" @click="goTopicDetail(item)">
|
||||
<image style="width: 200rpx; height: 140rpx;" :src="item.img" lazy-load mode="aspectFill"></image>
|
||||
<image style="width: 200rpx; height: 140rpx;" :src="item.img" lazy-load mode="aspectFill"></image>
|
||||
<view class="my-20 flex-1">
|
||||
<view class="text-black text-32">#{{item.title}}#</view>
|
||||
<view class="text-gray-400 text-26 my-10">{{item.desc}}</view>
|
||||
<view class="text-gray-400 text-24 my-10 flex w-full">
|
||||
<view class="w-1-2 text-left">热度：{{item.totalNum}}</view>
|
||||
<view class="w-1-2 text-left">观看量：{{item.totalNum}}</view>
|
||||
<view class="w-1-2 text-left">今日：{{item.todayNum}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -35,9 +35,28 @@
|
|||
methods: {
|
||||
// 话题详情
|
||||
goTopicDetail(item) {
|
||||
this.$u.route({
|
||||
url: '/pages/news/news-topic-detail',
|
||||
params: item
|
||||
// this.$u.route({
|
||||
// url: '/pages/news/news-topic-detail',
|
||||
// params: item
|
||||
// })
|
||||
this.$u.route('pages/home/detail', {
|
||||
data: JSON.stringify({
|
||||
age: 30,
|
||||
commentNum: 388,
|
||||
coverPic: "/static/img/list/01.jpg",
|
||||
infoNum: {
|
||||
cryNum: 2,
|
||||
index: 0,
|
||||
smileNum: 13
|
||||
},
|
||||
isFollow: false,
|
||||
sex: 1,
|
||||
shareNum: 32,
|
||||
title: "做一件有价值的事情，坚持下去等待时间的回报吧！",
|
||||
type: "img",
|
||||
userPic: "/static/img/header/a.svg",
|
||||
username: "芒种"
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -53,4 +72,4 @@
|
|||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<!-- 标签 -->
|
||||
<u-sticky bgColor="#fff">
|
||||
<u-tabs class="wrap-card" ref="tabs" @change="changeTab" :list="tablist" :current="tabIndex"
|
||||
lineColor="#01906c" :activeStyle="{color:'#01906c'}" :inactiveStyle="{color:'#909399'}" lineWidth="30"
|
||||
lineColor="#3c9cff" :activeStyle="{color:'#3c9cff'}" :inactiveStyle="{color:'#909399'}" lineWidth="30"
|
||||
:scrollable="false">
|
||||
</u-tabs>
|
||||
</u-sticky>
|
||||
|
|
|
|||
|
|
@ -1,248 +1,245 @@
|
|||
<template>
|
||||
<!-- 新鲜事页 -->
|
||||
<view class="news">
|
||||
<!-- 导航栏 -->
|
||||
<!-- <u-navbar placeholder>
|
||||
<view slot="left"></view>
|
||||
<view slot="center" class="nav-center">
|
||||
<view :class="{'active':tabIndex === index}" @click="changeTab(index)" v-for="(item,index) in tabList"
|
||||
:key="index">
|
||||
<view class="nav-title">{{item.name}}</view>
|
||||
<view class="active-line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar> -->
|
||||
<!-- 首页 -->
|
||||
<view class="home">
|
||||
<!-- 小程序导航栏 -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<u-navbar placeholder>
|
||||
<view slot="left" @click="btn" class="iconfont iconqiandao" style="visibility: hidden;"></view>
|
||||
<view slot="center" class="nav-center">
|
||||
<u-search placeholder="搜索新鲜事" @click="goSearch()" :showAction="false" disabled></u-search>
|
||||
<u-search placeholder="搜索新鲜事" @click="handleSearch()" :showAction="false" disabled></u-search>
|
||||
</view>
|
||||
<!-- <view slot="right" class="iconfont iconPensyumaobi" @click="handlePublish()"></view> -->
|
||||
</u-navbar>
|
||||
<!-- #endif -->
|
||||
<!-- 信息列表 -->
|
||||
<swiper class="bg-white px-20 py-20" :style="{height:swiperHeight + 'px'}" :current="tabIndex"
|
||||
@change="changeSwiper">
|
||||
<!-- <swiper-item>
|
||||
<scroll-view scroll-y class="flow h-full" @scrolltolower="reachBottom">
|
||||
<info-list v-for="(item,index) in followList.list" :key="index" :item="item">
|
||||
</info-list>
|
||||
<u-loadmore :status="followList.loadStatus"></u-loadmore>
|
||||
</scroll-view>
|
||||
</swiper-item> -->
|
||||
<!-- 话题 -->
|
||||
<swiper-item>
|
||||
<scroll-view scroll-y class="topic h-full">
|
||||
<!-- 搜索框 -->
|
||||
<!-- <view class="search-input" @click="goSearch">
|
||||
<u-input type="text" placeholder="请输入搜索内容"
|
||||
placeholderClass="iconfont iconsousuo text-28" border="none" inputAlign="center" clearable
|
||||
confirmType="search" disabled>
|
||||
</u-input>
|
||||
</view> -->
|
||||
<!-- 轮播图 -->
|
||||
<u-swiper :list="topicList.swiper" keyName="image" indicator indicatorMode="line" circular
|
||||
height="320rpx" bgColor="#ffffff"></u-swiper>
|
||||
<!-- 热门分类 -->
|
||||
<news-topic-nav></news-topic-nav>
|
||||
<!-- 最近更新 -->
|
||||
<view class="last-update">
|
||||
<!-- <view class="last-update-name">最近更新</view> -->
|
||||
<topic-list v-if='index<=3' :item="item" v-for="(item,index) in topicList.list"
|
||||
:key="index"></topic-list>
|
||||
</view>
|
||||
<!-- 标签 -->
|
||||
<u-sticky bgColor="#fff">
|
||||
<u-tabs class="wrap-card" ref="tabs" @change="changeTab" :list="tablist" :current="tabIndex"
|
||||
lineColor="#3c9cff" :activeStyle="{color:'#3c9cff'}" :inactiveStyle="{color:'#909399'}" lineWidth="30"
|
||||
:scrollable="false">
|
||||
<view slot="right" style="padding-right: 4px;" @tap="$u.route('/pages/news/news-topic-cate')">
|
||||
<u-icon name="list" size="23" bold></u-icon>
|
||||
</view>
|
||||
</u-tabs>
|
||||
</u-sticky>
|
||||
<!-- 列表 -->
|
||||
<swiper class="flex-1" :current="swiperIndex" @animationfinish="animationfinish">
|
||||
<swiper-item class="h-full" v-for="(item, index) in swiperList" :key="index">
|
||||
<scroll-view :ref="'scrollView'+index" :scroll-top="scrollTops[tabIndex]" class="w-full h-full" scroll-y
|
||||
@scrolltolower="reachBottom" @scroll="scroll">
|
||||
<!-- 有内容 -->
|
||||
<template v-if="item.list.length > 0">
|
||||
<!-- 资讯列表 -->
|
||||
<info-list :item="item1" v-for="(item1,index1) in item.list" :key="index1" :index="index1"
|
||||
@mark="handleMark" @follow="handleFollow">
|
||||
</info-list>
|
||||
<u-loadmore :status="loadStatus[tabIndex]"></u-loadmore>
|
||||
</template>
|
||||
<!-- 无内容 -->
|
||||
<template v-else>
|
||||
<u-empty text="本来无一物,何处惹尘埃" icon="/static/img/demo/winter.png" textSize="16" marginTop='25%'
|
||||
mode="list"></u-empty>
|
||||
</template>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- 回到顶部 -->
|
||||
<view v-if="scrollTop[tabIndex] > 400" class="go-top" @click="goTop">
|
||||
<u-icon color="#3c9cff" name="arrow-up" size="24"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
newsList,
|
||||
topicList
|
||||
newsList
|
||||
} from "@/utils/data/data.js"
|
||||
import {
|
||||
register
|
||||
} from '@/api/login.js'
|
||||
import InfoList from "@/pages/home/cpns/info-list.vue"
|
||||
import NewsTopicNav from "@/pages/news/cpns/news-topic-nav.vue"
|
||||
import TopicList from "@/pages/news/cpns/topic-list.vue"
|
||||
export default {
|
||||
components: {
|
||||
InfoList,
|
||||
NewsTopicNav,
|
||||
TopicList
|
||||
InfoList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 导航标签
|
||||
tabIndex: 1,
|
||||
tabList: [{
|
||||
name: "关注",
|
||||
id: 'follow'
|
||||
scrollTops: [0, 0, 0, 0, 0, 0],
|
||||
scrollTop: [0, 0, 0, 0, 0, 0],
|
||||
// 加载更多 // loadmore/ loading / nomore
|
||||
loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore', 'loadmore', 'loadmore'],
|
||||
// 标签栏
|
||||
tabIndex: 0,
|
||||
tablist: [{
|
||||
name: "关注"
|
||||
},
|
||||
{
|
||||
name: "话题",
|
||||
id: 'topic'
|
||||
name: "谷雨"
|
||||
},
|
||||
{
|
||||
name: "芒种"
|
||||
},
|
||||
{
|
||||
name: "小满",
|
||||
},
|
||||
{
|
||||
name: "霜降"
|
||||
},
|
||||
{
|
||||
name: "寒露"
|
||||
}
|
||||
],
|
||||
swiperHeight: 0,
|
||||
// 关注列表
|
||||
followList: {
|
||||
// 加载更多
|
||||
loadStatus: 'loadmore',
|
||||
// 列表数据
|
||||
list: newsList[0].list
|
||||
},
|
||||
// 话题列表
|
||||
topicList: {
|
||||
swiper: [ // 轮播图
|
||||
{
|
||||
image: '/static/img/demo/winter.png',
|
||||
title: '迷人的春天是令人欢欣鼓舞的。'
|
||||
},
|
||||
{
|
||||
image: '/static/img/demo/winter.png',
|
||||
title: '一道残阳铺水中，半江瑟瑟半江红。'
|
||||
},
|
||||
{
|
||||
image: '/static/img/demo/winter.png',
|
||||
title: '金秋的阳光温馨恬静，金秋的微风和煦轻柔。'
|
||||
},
|
||||
{
|
||||
image: '/static/img/demo/winter.png',
|
||||
title: '风吹过，寒气直侵入骨头。'
|
||||
}
|
||||
],
|
||||
|
||||
list: topicList[1].list
|
||||
}
|
||||
// 列表数据
|
||||
swiperIndex: 0,
|
||||
swiperList: newsList
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 设置swiperHeight
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
// 屏幕高度（screenHeight) = 手机状态栏的高度(statusBarHeight) + 导航栏高度(44px) + 可使用窗口高度(windowHeight)
|
||||
// 可使用窗口高度 = swiper高度 + 自定义导航栏高度
|
||||
this.swiperHeight = res.windowHeight - 44
|
||||
}
|
||||
})
|
||||
// 监听原生标题栏搜索输入框点击事件
|
||||
onNavigationBarSearchInputClicked() {
|
||||
this.handleSearch()
|
||||
},
|
||||
// 监听原生标题栏按钮点击事件
|
||||
onNavigationBarButtonTap(e) {
|
||||
switch (e.index) {
|
||||
case 1:
|
||||
this.handlePublish()
|
||||
break;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// tabbar点击
|
||||
changeTab(index) {
|
||||
this.tabIndex = index
|
||||
btn() {
|
||||
uni.login({
|
||||
success: (res) => {
|
||||
console.log(res);
|
||||
}
|
||||
})
|
||||
},
|
||||
// swiper滑动
|
||||
changeSwiper(e) {
|
||||
// 发布
|
||||
handlePublish() {
|
||||
this.$u.route('/pages/home/release')
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.$u.route('/pages/home/search', {
|
||||
type: 'info'
|
||||
})
|
||||
},
|
||||
// tab栏切换
|
||||
changeTab(item) {
|
||||
this.tabIndex = item.index
|
||||
this.swiperIndex = item.index
|
||||
},
|
||||
// swiper滑动结束，分别设置tabs和swiper的状态
|
||||
animationfinish(e) {
|
||||
this.tabIndex = e.detail.current
|
||||
this.swiperIndex = e.detail.current
|
||||
},
|
||||
// scroll-view触底
|
||||
// scroll-view到底部加载更多
|
||||
reachBottom() {
|
||||
// 是否可加载
|
||||
if (this.followList.loadStatus !== 'loadmore') return;
|
||||
// 加载更多
|
||||
this.followList.loadStatus = "loading"
|
||||
if (this.loadStatus[this.tabIndex] !== 'loadmore') return
|
||||
// 加载中
|
||||
this.loadStatus.splice(this.tabIndex, 1, "loading")
|
||||
setTimeout(() => {
|
||||
this.getList()
|
||||
this.getList(this.tabIndex)
|
||||
}, 1000);
|
||||
},
|
||||
// 获取列表
|
||||
getList(idx) {
|
||||
getList(index) {
|
||||
// 随机添加5条数据
|
||||
for (let i = 0; i < 5; i++) {
|
||||
let index = this.$u.random(0, this.followList.list.length - 1)
|
||||
let data = JSON.parse(JSON.stringify(this.followList.list[index]))
|
||||
this.followList.list.push(data)
|
||||
let curr = this.$u.random(0, this.swiperList[index].list.length - 1)
|
||||
let data = this.swiperList[index].list[curr]
|
||||
this.swiperList[index].list.push(data)
|
||||
}
|
||||
// 更新加载状态
|
||||
this.followList.loadStatus = "nomore"
|
||||
// 加载更多
|
||||
this.loadStatus.splice(this.tabIndex, 1, "nomore")
|
||||
},
|
||||
// 搜索
|
||||
goSearch() {
|
||||
this.$u.route('/pages/home/search', {
|
||||
type: 'topic'
|
||||
// 回到顶部
|
||||
scroll(e) {
|
||||
const index = this.tabIndex
|
||||
this.scrollTop.splice(index, 1, e.detail.scrollTop) // 400显示回到顶部
|
||||
},
|
||||
// 回到顶部
|
||||
goTop() {
|
||||
const index = this.tabIndex
|
||||
// 解决view层不同步的问题
|
||||
this.scrollTops.splice(index, 1, this.scrollTop[index])
|
||||
this.$nextTick(function() {
|
||||
this.scrollTops.splice(index, 1, 0)
|
||||
this.scrollTop.splice(index, 1, 0)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 关注
|
||||
handleFollow(item) {
|
||||
this.swiperList[this.swiperIndex].list[item.index].isFollow = item.value
|
||||
const title = item.value ? '关注成功' : '取消成功'
|
||||
uni.showToast({
|
||||
title,
|
||||
icon: 'none',
|
||||
})
|
||||
},
|
||||
// 表情
|
||||
handleMark(item) {
|
||||
let infoNum = this.swiperList[this.swiperIndex].list[item.index].infoNum
|
||||
switch (item.value) {
|
||||
case 'smile':
|
||||
if (infoNum.index == 1) return // 微笑
|
||||
else if (infoNum.index == 2) infoNum.cryNum--
|
||||
infoNum.index = 1
|
||||
infoNum.smileNum++
|
||||
break;
|
||||
case 'cry':
|
||||
if (infoNum.index == 2) return // 踩
|
||||
else if (infoNum.index == 1) infoNum.smileNum--
|
||||
infoNum.index = 2
|
||||
infoNum.cryNum++
|
||||
break
|
||||
}
|
||||
const title = item.value === 'smile' ? '谢谢表扬' : '继续加油'
|
||||
uni.showToast({
|
||||
title,
|
||||
icon: 'none',
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.news {
|
||||
.home {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - var(--window-top) - var(--window-bottom)); // 视高 - 内容区顶部 - 内容区底部
|
||||
width: 100%;
|
||||
|
||||
// 导航栏
|
||||
// 小程序导航栏
|
||||
/* #ifdef MP-WEIXIN */
|
||||
/deep/ .u-navbar {
|
||||
|
||||
.iconfont {
|
||||
font-size: 48rpx;
|
||||
color: $uni-color-green;
|
||||
}
|
||||
|
||||
.nav-center {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.nav-title {
|
||||
width: 60rpx;
|
||||
font-size: 30rpx;
|
||||
padding: 0 15rpx;
|
||||
font-weight: bold;
|
||||
color: $uni-text-color-gray;
|
||||
}
|
||||
|
||||
.active {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.nav-title {
|
||||
color: $uni-color-green;
|
||||
}
|
||||
|
||||
.active-line {
|
||||
border-bottom: 8rpx solid $uni-color-green;
|
||||
border-radius: 20rpx;
|
||||
width: 70rpx;
|
||||
position: absolute;
|
||||
bottom: -10rpx;
|
||||
left: 50%;
|
||||
margin-left: -35rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.u-navbar__content {
|
||||
padding-right: 180rpx !important; // 胶囊按钮
|
||||
margin-right: 180rpx !important; // 胶囊按钮
|
||||
}
|
||||
}
|
||||
|
||||
.topic {
|
||||
.search-input {
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
height: 70rpx;
|
||||
background-color: #F4F4F4;
|
||||
border-radius: 10rpx;
|
||||
|
||||
/deep/ .u-input {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.last-update {
|
||||
padding: 0 20rpx 20rpx;
|
||||
|
||||
.last-update-name {
|
||||
font-size: 32rpx;
|
||||
padding-bottom: 5rpx;
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
// 回到顶部
|
||||
.go-top {
|
||||
position: fixed;
|
||||
right: 30rpx;
|
||||
bottom: 100rpx;
|
||||
height: 80rpx;
|
||||
width: 80rpx;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,16 +1,20 @@
|
|||
<template>
|
||||
<!-- 小纸条列表 -->
|
||||
<view class="paper-item flex items-center p-20 border-b border-gray-100" hover-class="bg-gray" @click="goChat">
|
||||
<image class="item-img mr-20 rounded-full" :src="item.avatar" mode=""></image>
|
||||
<view class="flex-1 flex flex-col">
|
||||
<view class="flex justify-between items-center">
|
||||
<text class="text-30">{{item.nickName}}</text>
|
||||
<text class="text-28 text-gray-500">{{item.createTime}}</text>
|
||||
<image class=" rounded-20" style="width: 80rpx; height: 80rpx;margin: 0 20rpx;" :src="item.avatar" mode=""></image>
|
||||
<view style="display: flex;align-items: center;">
|
||||
<view class="flex flex-content">
|
||||
<text class="text1">退役士兵教育培训承训机构申请表</text>
|
||||
<text class="text2">退役士兵教育培训承训机构申请表描述信息</text>
|
||||
</view>
|
||||
<view class="flex justify-between items-center text-26 text-gray-500">
|
||||
<view>
|
||||
<image style="width: 50rpx; height: 50rpx;" :src="imageUrl+'retired/icon-retired-download.png'" mode="">
|
||||
</image>
|
||||
</view>
|
||||
<!-- <view class="flex justify-between items-center text-26 text-gray-500">
|
||||
<text class="item-content line-1">{{item.content}}</text>
|
||||
<u-badge type="error" max="99" :value="item.count"></u-badge>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -25,7 +29,7 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
imageUrl: getApp().globalData.imgUrl
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -47,4 +51,30 @@
|
|||
max-width: 500rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
.flex-content {
|
||||
flex-direction: column;
|
||||
// border: solid 1px red;
|
||||
margin-right: 30rpx;
|
||||
|
||||
.text1 {
|
||||
width: 480rpx;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.text2 {
|
||||
width: 480rpx;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
font-size: 24rpx;
|
||||
color: #a2a2a2;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,13 +5,13 @@
|
|||
<!-- #ifdef MP-WEIXIN -->
|
||||
<u-navbar placeholder>
|
||||
<view class="flex" slot="left">
|
||||
<view class="iconfont iconduoren" @click="handleFirend()">
|
||||
<view style="visibility: hidden;" class="iconfont iconduoren" @click="handleFirend()">
|
||||
</view>
|
||||
<view class="iconfont iconcaidan ml-20" @click="showPopup = true">
|
||||
<view style="visibility: hidden;" class="iconfont iconcaidan ml-20" @click="showPopup = true">
|
||||
</view>
|
||||
</view>
|
||||
<view slot="center" class="nav-center">
|
||||
小纸条
|
||||
技能培训
|
||||
</view>
|
||||
</u-navbar>
|
||||
<!-- #endif -->
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<u-empty v-if="list.length === 0" text="本来无一物,何处惹尘埃" icon="/static/img/demo/winter.png" textSize="16"
|
||||
marginTop='25%' mode="list"></u-empty>
|
||||
<!-- 底部弹窗 -->
|
||||
<u-popup :show="showPopup" @close="showPopup = false" mode="top" :safeAreaInsetTop="true">
|
||||
<!-- <u-popup :show="showPopup" @close="showPopup = false" mode="top" :safeAreaInsetTop="true">
|
||||
<view class="flex justify-center items-center text-30 py-20 border-b" hover-class="bg-gray"
|
||||
@click="popupHandle('friend')">
|
||||
<text class="iconfont iconsousuo mr-20"></text>添加好友
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
@click="popupHandle('clear')">
|
||||
<text class="iconfont iconshanchu mr-20"></text>清空消息
|
||||
</view>
|
||||
</u-popup>
|
||||
</u-popup> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue