From 82c62ebc487fb43f3f45a8fd1172023937d144bc Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Wed, 30 Jun 2021 17:54:10 +0800
Subject: [PATCH] 1.整体页面样式调整，图标更换 2.工作台页面调整 3.资讯页面调整，更换顶部导航栏，新增tab 条，搜索框
---
pages/article/article.vue | 401 +++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 259 insertions(+), 142 deletions(-)
diff --git a/pages/article/article.vue b/pages/article/article.vue
index aa2be09..4c96254 100644
--- a/pages/article/article.vue
+++ b/pages/article/article.vue
@@ -1,12 +1,28 @@
<template>
- <view class="advisory-big">
- <!-- 自定义顶部导航栏 -->
- <navBarTop :title="'我要看'"></navBarTop>
- <!-- 顶部下拉刷新 -->
- <!-- <view v-show="isFlash">
- <uni-load-more :status="loadStatus" ></uni-load-more>
- </view> -->
- <view v-for="i in data" class="advisory-model" @click="goDetail(i)">
+ <view class="advisory-big ">
+ <!-- 自定义顶部导航栏 -->
+ <view class="uni-nav-bar-info" :style="{marginTop:navbarTopHeight}">
+ <view class="title" @click="goTabDetail(index)" v-for="(item,index) in titleList"
+ :style="titleNum==index? 'color:#000000':'color:#808080'">{{item}}</view>
+ </view>
+
+ <view class="article-tab">
+ <view :class="{'article-tab-title':true,'cccc':index == articleTabNum}" @click="goArticleTab(index)" v-for="(item,index) in articleTabArr"
+ :style="articleTabNum==index?'color:#000000':'color:#808080'">{{item}}</view>
+ <image src="../../static/images/article/menu.png"></image>
+ </view>
+
+ <view class="search-block">
+ <view class="search-ico-wapper">
+ <image src="../../static/images/search/search.png" class="search-ico" mode=""></image>
+ </view>
+ <input type="text" value="" placeholder="搜索" class="search-text" maxlength="10" focus/>
+ <view class="search-ico-wapper1">
+ <image src="../../static/images/article/microphone.png" class="search-ico-1" mode=""></image>
+ </view>
+ </view>
+ <view class="article-content">
+ <view v-for="i in data" class="advisory-model" @click="goDetail(i)">
<view class="advisory-left">
<view class="advisory-title-top">
<view class="advisory-title">{{i.title}}</view>
@@ -19,63 +35,70 @@
<view class="advisory-right">
<image :src="i.url"></image>
</view>
-
</view>
- <!-- loading加载提示处 -->
- <!-- <view v-show="isLoadMore">
- <uni-load-more :status="loadStatus" ></uni-load-more>
- </view> -->
+ </view>
</view>
</template>
<script>
import navBarTop from '../../components/nav-bar-top/nav-bar-top.vue';
- export default{
+ export default {
components: {
navBarTop
},
- data(){
+ data() {
return {
// pathUrl:"http://localhost:89/",
- pathUrl:"http://s16s652780.51mypc.cn/api",
- page:1,
- pagesize:10,
+ pathUrl: "http://s16s652780.51mypc.cn/api",
+ page: 1,
+ pagesize: 10,
// loadStatus:'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
- isLoadMore:false, //是否加载中
- isFlash:false,//是否刷新
- data:[]
+ isLoadMore: false, //是否加载中
+ isFlash: false, //是否刷新
+ data: [],
+ titleList: ['推荐', '要闻', '新思想'],
+ titleNum: 0,
+ articleTabArr: ['全部', '视频', '社会', '经济', '关注'],
+ articleTabNum: 0,
+ navbarTopHeight: "10px"
}
},
- mounted(){
+ mounted() {
// this.getArtcilePageList();
},
//上拉加载更多
- onReachBottom(){ //上拉触底函数
- console.log("上拉了")
- if(!this.isLoadMore){ //此处判断，上锁，防止重复请求
- // this.isLoadMore=true
- this.page+=1
- this.getArtcilePageList(2)
- }
- },
- //下拉刷新
- onPullDownRefresh() {
- // console.log("下拉了！....");
- if(!this.isFlash){ //此处判断，上锁，防止重复请求
- // this.isFlash=true;
- this.page =1;
- this.getArtcilePageList(1);
- uni.stopPullDownRefresh();
- }
- },
+ // onReachBottom() { //上拉触底函数
+ // console.log("上拉了")
+ // if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
+ // // this.isLoadMore=true
+ // this.page += 1
+ // this.getArtcilePageList(2)
+ // }
+ // },
+ // //下拉刷新
+ // onPullDownRefresh() {
+ // // console.log("下拉了！....");
+ // if (!this.isFlash) { //此处判断，上锁，防止重复请求
+ // // this.isFlash=true;
+ // this.page = 1;
+ // this.getArtcilePageList(1);
+ // uni.stopPullDownRefresh();
+ // }
+ // },
onLoad() {
- this.getArtcilePageList(1);
+ this.getArtcilePageList(1);
uni.stopPullDownRefresh();
},
- methods:{
+ methods: {
+ goArticleTab(index) {
+ this.articleTabNum = index;
+ },
+ goTabDetail(index) {
+ this.titleNum = index;
+ },
//去跳转详情页面
- goDetail(e){
-
+ goDetail(e) {
+
//内容传值容易报错，所以直传id,然后调用接口去查询
// let detail = {
// title: e.title,
@@ -86,7 +109,7 @@
// imgUrl: e.url,
// videoUrl:e.videoUrl
// };
-
+
let detail = {
id: e.id
};
@@ -95,40 +118,40 @@
url: './article_detail?detailData=' + JSON.stringify(detail)
});
},
-
+
//获取资讯信息
- getArtcilePageList(tab){
+ getArtcilePageList(tab) {
var that = this;
uni.request({
- url: that.pathUrl+'/article/article/page',
- method:'GET',
- data:{
- current:this.page,
+ url: that.pathUrl + '/article/article/page',
+ method: 'GET',
+ data: {
+ current: this.page,
size: this.pagesize
},
success: (res) => {
- if(res.data.code==200){
- if(res.data.data.records){
- if(tab==1){
+ if (res.data.code == 200) {
+ if (res.data.data.records) {
+ if (tab == 1) {
that.data = res.data.data.records;
- }else{
+ } else {
//如果总数小于pageSize,不做其他操作
- if(res.data.data.total<this.pagesize){
+ if (res.data.data.total < this.pagesize) {
that.data = res.data.data.records;
- }else{
- if(res.data.data.records.length<this.pagesize){
+ } else {
+ if (res.data.data.records.length < this.pagesize) {
//如果数量小于分页数量，则为最后一页
// this.isLoadMore=true;
// this.loadStatus='nomore';
- }else{
+ } else {
// this.isLoadMore=false
}
- res.data.data.records.forEach((item)=>{
+ res.data.data.records.forEach((item) => {
that.data.push(item);
})
}
}
- }else{
+ } else {
// this.isLoadMore=true;
// this.loadStatus='nomore';
}
@@ -142,98 +165,192 @@
</script>
<style lang="scss" scoped>
- .advisory-big{
+ .advisory-big {
width: 100%;
height: 70%;
- position: absolute;
- // top: 2%;
- // background-color: #0078A8;
-
- .advisory-model{
- width: 100%;
- height: 20%;
- // background-color: #00FF00;
-
-
- .advisory-left{
- width: 61%;
- height: 80%;
- float: left;
- position: relative;
- // background-color: #00FFFF;
- position: relative;
- left: 4%;
- top: 10%;
-
-
- .advisory-title-top{
- // background-color: #2692FD;
- width: 100%;
- height: 75%;
-
- .advisory-title{
- width: 92%;
- font-size: 15px;
- font-weight: 550;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- }
-
-
- }
-
- .advisory-title-down{
- // background-color: #0078A8;
- width: 100%;
- height: 25%;
- font-size: 12px;
- font-weight: 550;
- color: #808080;
-
- .advisory-title-name{
- width: 130rpx;
- float: left;
- letter-spacing: 1px;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 1;
- -webkit-box-orient: vertical;
- // background-color:#0078A8;
- }
-
- .advisory-title-time{
- position: relative;
- left: 15rpx;
- }
- }
-
+
+ .uni-nav-bar-info {
+ display: flex;
+ align-items: center;
+ height: 50px;
+
+ .title {
+ font-size: 1.2rem;
+ color: #808080;
+ margin-left: 1rem;
}
+ }
+
+
+ .article-tab {
+ // background-color: #007AFF;
+ width: 100%;
+ height: 2rem;
+ border-bottom: 2px solid #D7D7D7;
+
+ .article-tab-title {
+ // text-align: center;
+ width: 14%;
+ float: left;
+ margin-left: 1rem;
+ // border-bottom: 4px solid #000000;
+ }
+
+ image {
+ width: 1.5rem;
+ height: 1.5rem;
+ }
+ }
+
+ .article-content{
+ margin-top: 1rem;
+ width: 100%;
- .advisory-right{
- // background-color: #222222;
- width: 32%;
- height: 80%;
- left: 63%;
- position: relative;
- top: 10%;
-
- image{
+ .advisory-model {
+ width: 100%;
+ height: 6rem;
+ // background-color: #00FF00;
+
+
+ .advisory-left {
+ width: 61%;
+ height: 80%;
+ float: left;
position: relative;
- left: 0px;
- top: -100%;
- width: 100%;
- height: 100%;
- border-radius: 5px;
+ // background-color: #00FFFF;
+ position: relative;
+ left: 4%;
+ top: 10%;
+
+
+ .advisory-title-top {
+ // background-color: #2692FD;
+ width: 100%;
+ height: 75%;
+
+ .advisory-title {
+ width: 92%;
+ font-size: 15px;
+ font-weight: 550;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ }
+
+
+ }
+
+ .advisory-title-down {
+ // background-color: #0078A8;
+ width: 100%;
+ height: 25%;
+ font-size: 12px;
+ font-weight: 550;
+ color: #808080;
+
+ .advisory-title-name {
+ width: 130rpx;
+ float: left;
+ letter-spacing: 1px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 1;
+ -webkit-box-orient: vertical;
+ // background-color:#0078A8;
+ }
+
+ .advisory-title-time {
+ position: relative;
+ left: 15rpx;
+ }
+ }
+
+ }
+
+ .advisory-right {
+ // background-color: #222222;
+ width: 32%;
+ height: 80%;
+ left: 63%;
+ position: relative;
+ top: 10%;
+
+ image {
+ position: relative;
+ left: 0px;
+ top: -100%;
+ width: 100%;
+ height: 100%;
+ border-radius: 5px;
+ }
}
}
}
}
+ .cccc{
+ position: relative;
+ top: -5px;
+ }
+ .cccc::before {
+ position: relative;
+ top: 25px;
+ content: '';
+ width: 30px;
+ display: block;
+ height: 3.5px;
+ background-color: #000;
+ }
+
+ /* 搜索框 */
+ .search-ico, .search-ico-1{
+ width: 40upx;
+ height: 40upx;
+ }
+
+ .search-block{
+ width: 94%;
+ margin: 0 auto;
+ // background-color: #007AFF;
+ display: flex;
+ flex-direction: row;
+ position: relative;
+ top: 0.35rem;
+
+ .search-ico-wapper{
+ background-color: #F1F1F1;
+ display: flex;
+ flex-direction:column;
+ justify-content: center;
+ padding: 0upx 0upx 0upx 15upx;
+ border-bottom-left-radius:7px;
+ border-top-left-radius: 7px;
+ }
+
+ .search-text{
+ font-size: 14px;
+ background-color: #F1F1F1;
+ height: 70upx;
+ width: 100%;
+ padding-left: 0.5rem;
+ }
+
+
+ .search-ico-wapper1{
+ background-color: #F1F1F1;
+ display: flex;
+ flex-direction:column;
+ justify-content: center;
+ padding: 0upx 15upx 0upx 0upx;
+ border-bottom-right-radius:7px;
+ border-top-right-radius: 7px;
+ }
+ }
+
</style>
--
Gitblit v1.9.3