From f4ed2c4a1412f7256614e04e18683ca15a89bb25 Mon Sep 17 00:00:00 2001
From: 祖安之光 <11848914+light-of-zuan@user.noreply.gitee.com>
Date: Wed, 05 Nov 2025 08:58:21 +0800
Subject: [PATCH] 新增
---
pages/tabBar/firstPage/firstPage.vue | 1068 +++++++++++++++++++++++++++++++---------------------------
1 files changed, 572 insertions(+), 496 deletions(-)
diff --git a/pages/tabBar/firstPage/firstPage.vue b/pages/tabBar/firstPage/firstPage.vue
index 5dac134..615a143 100644
--- a/pages/tabBar/firstPage/firstPage.vue
+++ b/pages/tabBar/firstPage/firstPage.vue
@@ -1,161 +1,195 @@
<template>
+ <!-- 自定义导航栏 -->
<view>
- <!-- 自定义导航栏 -->
-<!-- <view class="navBarBox fix">
- <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
- <view class="navBar">
- <view class="barText">首页</view>
+ <view class="custom-navbar">
+ <view class="navbar-content">
+ <view class="nav-left" @click="handleBack">
+ <view class="back-btn">
+ <text class="back-text">返回</text>
+ </view>
+ </view>
+ <text class="navbar-title">安全教育</text>
+ <view class="nav-right"></view>
</view>
- </view> -->
- <view style="width: 100%;padding: 0 15px;box-sizing: border-box;margin: 20px 0">
- <u-swiper :list="swiperList" indicatorMode="dot" bgColor="#f5f7fa" circular height="160" indicator previousMargin="30" nextMargin="30"></u-swiper>
- </view>
-
- <scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
- @scrolltolower="lower" lower-threshold="150" @scroll="scrollView" style="height:calc(100vh - 180px)">
- <view class="m-p-15">
- <view class="card" style="width:100%">
- <view class="card-t">
- <span class="card-t-l">我的线上课程</span>
- <span class="card-t-r" @click="toCourses">查看全部</span>
- </view>
- <view class="card-c" v-if="Array.isArray(classList) && classList.length>0">
- <view class="card-i" v-for="(item,index) in classList" :key="index">
- <u-image radius="16px" width="200rpx" height="200rpx" :show-loading="true" :src="getImageUrl(item.course.logo)" mode="aspectFill">
- </u-image>
- <!-- <view class="card-i-t">目前已学：{{item.totalProgress}}分钟</view>-->
- <view class="card-i-r">
- <view class="card-i-r-t">
- <view>{{item.phaseName + '-' + item.course.name}}</view>
- <span style="color: #999;font-size: 12px;display: flex;align-items: center"><u-icon name="account" color="#999" size="18" style="margin-bottom: 0;margin-right: 2px"></u-icon>{{item.createName +'('+ item.createTime +')'}}</span>
- </view>
- <view class="card-i-r-b">
- <u-tag icon="clock" :text="secondsToHms(item.course.period)" type="success" size="mini" shape="circle" plain plainFill></u-tag>
- <u-button class="study-button" type="primary" text="开始学习" shape="circle" size="small" @click="toStudy(item)"></u-button>
- </view>
- </view>
- </view>
- </view>
- <view class="card-c" v-else>
- <span style="font-size: 28rpx;color: #999;">暂无课程信息</span>
</view>
- </view>
- </view>
- <view class="m-p-15">
- <view class="card" style="width:100%">
- <view class="card-t">
- <span class="card-t-l">我的考试</span>
-<!-- <uni-data-select
+ <view class="page-content" :style="{ paddingTop: navbarHeight + 'px' }">
+ <view style="width: 100%;padding: 0 15px;box-sizing: border-box;margin: 20px 0">
+ <u-swiper :list="swiperList" indicatorMode="dot" bgColor="#f5f7fa" circular height="160" indicator
+ previousMargin="30" nextMargin="30"></u-swiper>
+ </view>
+ <scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
+ lower-threshold="150" @scroll="scrollView" style="height:calc(100vh - 244px)">
+ <view class="m-p-15">
+ <view class="card" style="width:100%">
+ <view class="card-t">
+ <span class="card-t-l">我的线上课程</span>
+ <span class="card-t-r" @click="toCourses">查看全部</span>
+ </view>
+ <view class="card-c" v-if="Array.isArray(classList) && classList.length>0">
+ <view class="card-i" v-for="(item,index) in classList" :key="index">
+ <u-image radius="16px" width="200rpx" height="200rpx" :show-loading="true"
+ :src="getImageUrl(item.course.logo)" mode="aspectFill">
+ </u-image>
+ <!-- <view class="card-i-t">目前已学：{{item.totalProgress}}分钟</view>-->
+ <view class="card-i-r">
+ <view class="card-i-r-t">
+ <view>{{item.phaseName + '-' + item.course.name}}</view>
+ <span
+ style="color: #999;font-size: 12px;display: flex;align-items: center"><u-icon
+ name="account" color="#999" size="18"
+ style="margin-bottom: 0;margin-right: 2px"></u-icon>{{item.createName +'('+ item.createTime +')'}}</span>
+ </view>
+ <view class="card-i-r-b">
+ <u-tag icon="clock" :text="secondsToHms(item.course.period)" type="success"
+ size="mini" shape="circle" plain plainFill></u-tag>
+ <u-button class="study-button" type="primary" text="开始学习" shape="circle"
+ size="small" @click="toStudy(item)"></u-button>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="card-c" v-else>
+ <span style="font-size: 28rpx;color: #999;">暂无课程信息</span>
+ </view>
+ </view>
+ </view>
+ <view class="m-p-15">
+ <view class="card" style="width:100%">
+ <view class="card-t">
+ <span class="card-t-l">我的考试</span>
+ <!-- <uni-data-select
v-model="examParams.state"
placeholder="完成状态"
:localdata="examSelect"
:clear="true"
@change="changeExam"
></uni-data-select> -->
- <div>
-<!-- <span @click="showSelect = true" class="uni-stat__select"><text>{{examSelect[0][examParams.state].text}}</text><u-icon name="arrow-down" color="#999" size="14"></u-icon></span>
+ <div>
+ <!-- <span @click="showSelect = true" class="uni-stat__select"><text>{{examSelect[0][examParams.state].text}}</text><u-icon name="arrow-down" color="#999" size="14"></u-icon></span>
<u-picker :show="showSelect" :columns="examSelect" @confirm="confirm" @cancel="showSelect = false" keyName="text"></u-picker> -->
- <u-tabs :list="examSelect" :current="currentTab" @click="changeState"></u-tabs>
- </div>
-
-
- </view>
- <view class="card-c card-d" v-if="examList && examList.length>0">
- <view class="paper-card" v-for="(item,index) in examList" :key="index" @click="toExam(item)">
- <view class="paper-card-t">
- <!-- <span :class="item.state == 0?'blue':item.state == 1?'red':'green'">[{{item.state == 0?'待考试':item.state == 1?'待批阅':'批阅完成'}}]</span> -->
- {{item.examPaper.name}}</view>
- <view class="tag-area">
- <u-tag :text="item.examPaper.categoryName" plain size="mini"></u-tag>
- <u-tag :text="item.examPaper.limited == 1?'时长：' + item.examPaper.limitTime + '分钟':'不限时'" type="warning" plain size="mini"></u-tag>
- </view>
- <view class="paper-card-b">
- <view style="font-size: 12px;margin-top: 5px;color: #999">
- <view style="margin-bottom: 2px">创建人：{{item.createName}}</view>
- <view>截止日期：{{item.examPaper.deadline.substring(0,10)}}</view>
- </view>
-<!-- <view class="btn-area" v-if="item.state == 0">
+ <u-tabs :list="examSelect" :current="currentTab" @click="changeState"></u-tabs>
+ </div>
+
+
+ </view>
+ <view class="card-c card-d" v-if="examList && examList.length>0">
+ <view class="paper-card" v-for="(item,index) in examList" :key="index"
+ @click="toExam(item)">
+ <view class="paper-card-t">
+ <!-- <span :class="item.state == 0?'blue':item.state == 1?'red':'green'">[{{item.state == 0?'待考试':item.state == 1?'待批阅':'批阅完成'}}]</span> -->
+ {{item.examPaper.name}}
+ </view>
+ <view class="tag-area">
+ <u-tag :text="item.examPaper.categoryName" plain size="mini"></u-tag>
+ <u-tag
+ :text="item.examPaper.limited == 1?'时长：' + item.examPaper.limitTime + '分钟':'不限时'"
+ type="warning" plain size="mini"></u-tag>
+ </view>
+ <view class="paper-card-b">
+ <view style="font-size: 12px;margin-top: 5px;color: #999">
+ <view style="margin-bottom: 2px">创建人：{{item.createName}}</view>
+ <view>截止日期：{{item.examPaper.deadline.substring(0,10)}}</view>
+ </view>
+ <!-- <view class="btn-area" v-if="item.state == 0">
<u-button @click="toExam(item,1)" class="exam-button" type="primary" text="开始考试" shape="circle" size="small"></u-button>
</view> -->
- <view class="btn-area" v-if="item.state == 2">
- <u-button @tap.stop="reExam(item)" class="exam-button" type="primary" text="重新考试" shape="circle" size="small"></u-button>
- <!-- <u-button @click="toExam(item,2)" class="re-exam-button" type="primary" text="查看" shape="circle" size="small"></u-button> -->
+ <view class="btn-area" v-if="item.state == 2">
+ <u-button @tap.native.stop="reExam(item)" class="exam-button" type="primary"
+ text="重新考试" shape="circle" size="small"></u-button>
+ <!-- <u-button @click="toExam(item,2)" class="re-exam-button" type="primary" text="查看" shape="circle" size="small"></u-button> -->
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="card-c card-d" v-else>
+ <u-empty text="该状态暂无记录" mode="data"></u-empty>
+ </view>
+ </view>
</view>
- </view>
- </view>
- </view>
- <view class="card-c card-d" v-else>
- <u-empty text="该状态暂无记录" mode="data"></u-empty>
- </view>
- </view>
- </view>
- </scroll-view>
+ </scroll-view>
+ </view>
</view>
</template>
<script>
- import {getClassList, getExamList, getSwiperList} from '../../../api/index.js'
+ import {
+ getClassList,
+ getExamList,
+ getSwiperList
+ } from '../../../api/index.js'
import VUE_APP_BASE_URL from 'common/constant.js'
- import {postEndExam, postAgainExam} from "../../../api/wearhouse";
+ import {
+ postEndExam,
+ postAgainExam
+ } from "../../../api/wearhouse";
export default {
- components:{},
+ components: {},
data() {
return {
- showSelect:false,
- swiperList: [
- '/static/defaultCover.jpg','/static/defaultCover.jpg','/static/defaultCover.jpg'
- ],
- titleList:[
- {
- label: '默认排序',
- value: 1,
- }
- ],
- classList: [],
- examList: [],
- totalPage: 0,
- page: 'pages/tabBar/firstPage/firstPage',
- statusBarHeight: '',
- classParams:{
- pageNum: 1,
- pageSize: 3,
- },
- examParams: {
- pageNum: 1,
- pageSize: 10,
- state: 0
- },
- currentTab: 0,
- examSelect: [
- { name: "待考试" },
- { name: "批阅完成" }
- ],
+ navbarHeight: 0,
+ showSelect: false,
+ swiperList: [
+ '/static/defaultCover.jpg', '/static/defaultCover.jpg', '/static/defaultCover.jpg'
+ ],
+ titleList: [{
+ label: '默认排序',
+ value: 1,
+ }],
+ classList: [],
+ examList: [],
+ totalPage: 0,
+ page: 'pages/tabBar/firstPage/firstPage',
+ statusBarHeight: '',
+ classParams: {
+ pageNum: 1,
+ pageSize: 3,
+ },
+ examParams: {
+ pageNum: 1,
+ pageSize: 10,
+ state: 0
+ },
+ currentTab: 0,
+ examSelect: [{
+ name: "待考试"
+ },
+ {
+ name: "批阅完成"
+ }
+ ],
role: '',
- realname:''
+ realname: ''
}
-
+
},
onLoad() {
//获取手机状态栏高度
- this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
-
- this.examList = []
- this.classParams.pageNum = 1
- this.examParams.pageNum = 1
- this.getSwiper()
- this.getClass()
- this.getExamList()
+ this.getNavbarHeight()
+
+ this.examList = []
+ this.classParams.pageNum = 1
+ this.examParams.pageNum = 1
+ this.getSwiper()
+ this.getClass()
+ this.getExamList()
},
- onShow(){
- // this.role = uni.getStorageSync('roleName');
- // this.realname = uni.getStorageSync('user').realName
- // this.tabBarLists = uni.getStorageSync('tabBarList');
+ onShow() {
},
- created(){
- },
+ created() {},
methods: {
+ getNavbarHeight() {
+ const systemInfo = uni.getSystemInfoSync()
+ const statusBarHeight = systemInfo.statusBarHeight
+ const navbarHeight = 44
+ this.navbarHeight = statusBarHeight + navbarHeight
+ },
+ handleBack() {
+ uni.navigateTo({
+ url: '/pages/menuPage/index'
+ })
+ },
loginOut() {
uni.clearStorageSync();
uni.clearStorage();
@@ -164,414 +198,456 @@
})
},
- confirm(e) {
- this.examParams.state = e.value[0].value
- this.examParams.pageNum = 1
- this.getExamList()
- this.showSelect = false
- },
+ confirm(e) {
+ this.examParams.state = e.value[0].value
+ this.examParams.pageNum = 1
+ this.getExamList()
+ this.showSelect = false
+ },
- changeState(e){
- this.currentTab = e.index
- this.examParams.state = e.index == 0?0:2
- this.examParams.pageNum = 1
- this.getExamList()
- },
+ changeState(e) {
+ this.currentTab = e.index
+ this.examParams.state = e.index == 0 ? 0 : 2
+ this.examParams.pageNum = 1
+ this.getExamList()
+ },
- async getSwiper(){
- const res = await getSwiperList()
- if(res.code == 200){
- let list = res.data.list || []
- if(list.length>0){
- this.swiperList = list.map(i=>VUE_APP_BASE_URL + '/api/' + i.imgUrl) || []
- }
- }else{
- uni.$u.toast(res.message)
- }
- },
+ async getSwiper() {
+ const res = await getSwiperList()
+ if (res.code == 200) {
+ let list = res.data.list || []
+ if (list.length > 0) {
+ this.swiperList = list.map(i => VUE_APP_BASE_URL + '/api/' + i.imgUrl) || []
+ }
+ } else {
+ uni.$u.toast(res.message)
+ }
+ },
- getClass(){
- getClassList(this.classParams).then(res => {
- if(res.code == 200) {
- if(res.data && res.data.list.length > 0){
+ getClass() {
+ getClassList(this.classParams).then(res => {
+ if (res.code == 200) {
+ if (res.data && res.data.list.length > 0) {
this.classList = res.data.list
- }else {
- this.classList = []
+ } else {
+ this.classList = []
}
- }else{
+ } else {
uni.$u.toast(res.message)
}
})
},
- getExamList(){
- getExamList(this.examParams).then(res => {
- if(res.code == 200) {
- let list = res.data.list?res.data.list: [];
- if (res.data.pageNum != 1) {
- this.examList = this.examList.concat(list)
- } else {
- this.examList = res.data.list
- }
- this.totalPage = res.data.totalPage
- }else{
- uni.$u.toast(res.message)
- }
- })
- },
+ getExamList() {
+ getExamList(this.examParams).then(res => {
+ if (res.code == 200) {
+ let list = res.data.list ? res.data.list : [];
+ if (res.data.pageNum != 1) {
+ this.examList = this.examList.concat(list)
+ } else {
+ this.examList = res.data.list
+ }
+ this.totalPage = res.data.totalPage
+ } else {
+ uni.$u.toast(res.message)
+ }
+ })
+ },
- getImageUrl(logo) {
- return logo ? VUE_APP_BASE_URL + '/api/' + logo : '/static/defaultCover.jpg';
- },
+ getImageUrl(logo) {
+ return logo ? VUE_APP_BASE_URL + '/api/' + logo : '/static/defaultCover.jpg';
+ },
- toStudy(item) {
- uni.setStorageSync("prevPage", '/pages/tabBar/firstPage/firstPage');
- uni.navigateTo({
- url: `/pages/tabBar/current/detail?bank=` + encodeURIComponent(JSON.stringify(item))
- })
- },
+ toStudy(item) {
+ uni.setStorageSync("prevPage", '/pages/tabBar/firstPage/firstPage');
+ uni.navigateTo({
+ url: `/pages/tabBar/current/detail?bank=` + encodeURIComponent(JSON.stringify(item))
+ })
+ },
- toExam(item){
- console.log(item,'item')
- if(item.state == 0 && item.examPaper.deadline){
- const deadline = item.examPaper.deadline
- const deadlineTime = new Date(deadline).getTime()
- const currentTime = new Date().getTime()
- if (currentTime > deadlineTime) {
- uni.$u.toast('已超过考试截止时间，不可重新考试')
- return
- }
- }
- if(item.state == 0){
- uni.showModal({
- title: '提示',
- content: item.examPaper.limited == 1?'该考试限制时长为：' + item.examPaper.limitTime + '分钟，进入后开始计时，计时结束自动交卷，是否继续？':'是否确认考试？',
- success: function (res) {
- if (res.confirm) {
- uni.setStorageSync("prevPage", '/pages/tabBar/firstPage/firstPage');
- uni.navigateTo({
- url: `/pages/tabBar/firstPage/exam?bank=` + encodeURIComponent(JSON.stringify(item)) + `&type=` + encodeURIComponent(JSON.stringify(1))
- })
- } else if (res.cancel) {
- console.log('用户点击取消');
- }
- }
- })
- }else{
- uni.setStorageSync("prevPage", '/pages/tabBar/firstPage/firstPage');
- uni.navigateTo({
- url: `/pages/tabBar/firstPage/exam?bank=` + encodeURIComponent(JSON.stringify(item)) + `&type=` + encodeURIComponent(JSON.stringify(2))
- })
- }
- },
-
- async reExam(item){
- const t = this
- if(item.examPaper.deadline){
- const deadline = item.examPaper.deadline
- const deadlineTime = new Date(deadline).getTime()
- const currentTime = new Date().getTime()
- if (currentTime > deadlineTime) {
- uni.$u.toast('已超过考试截止时间，不可重新考试')
- return
+ toExam(item) {
+ if (item.state == 0 && item.examPaper.deadline) {
+ const deadline = item.examPaper.deadline
+ const deadlineTime = new Date(deadline).getTime()
+ const currentTime = new Date().getTime()
+ if (currentTime > deadlineTime) {
+ uni.$u.toast('已超过考试截止时间，不可重新考试')
+ return
+ }
}
- }
- uni.showModal({
- title: '提示',
- content: '是否重新考试？',
- success: async function (res) {
- if (res.confirm) {
- const res = await postAgainExam({paperId: item.paperId,studentId: uni.getStorageSync('uid')})
- if(res.code == 200){
- uni.$u.toast(res.message)
- t.currentTab = 0
- t.examParams.state = 0
- t.examParams.pageNum = 1
- t.getExamList()
- }else{
- uni.$u.toast(res.message)
- }
- } else if (res.cancel) {
- console.log('用户点击取消');
- }
- }
- })
- },
+ if (item.state == 0) {
+ uni.showModal({
+ title: '提示',
+ content: item.examPaper.limited == 1 ? '该考试限制时长为：' + item.examPaper.limitTime +
+ '分钟，进入后开始计时，计时结束自动交卷，是否继续？' : '是否确认考试？',
+ success: function(res) {
+ if (res.confirm) {
+ uni.setStorageSync("prevPage", '/pages/tabBar/firstPage/firstPage');
+ uni.navigateTo({
+ url: `/pages/tabBar/firstPage/exam?bank=` + encodeURIComponent(JSON
+ .stringify(item)) + `&type=` + encodeURIComponent(JSON
+ .stringify(1))
+ })
+ } else if (res.cancel) {
+ console.log('用户点击取消');
+ }
+ }
+ })
+ } else {
+ uni.setStorageSync("prevPage", '/pages/tabBar/firstPage/firstPage');
+ uni.navigateTo({
+ url: `/pages/tabBar/firstPage/exam?bank=` + encodeURIComponent(JSON.stringify(item)) +
+ `&type=` + encodeURIComponent(JSON.stringify(2))
+ })
+ }
+ },
- secondsToHms(seconds) {
- seconds = Number(seconds);
- const h = Math.floor(seconds / 3600);
- const m = Math.floor(seconds % 3600 / 60);
- const s = Math.floor(seconds % 3600 % 60);
+ async reExam(item) {
+ const t = this
+ if (item.examPaper.deadline) {
+ const deadline = item.examPaper.deadline
+ const deadlineTime = new Date(deadline).getTime()
+ const currentTime = new Date().getTime()
+ if (currentTime > deadlineTime) {
+ uni.$u.toast('已超过考试截止时间，不可重新考试')
+ return
+ }
+ }
+ uni.showModal({
+ title: '提示',
+ content: '是否重新考试？',
+ success: async function(res) {
+ if (res.confirm) {
+ const res = await postAgainExam({
+ paperId: item.paperId,
+ studentId: uni.getStorageSync('uid')
+ })
+ if (res.code == 200) {
+ uni.$u.toast(res.message)
+ t.currentTab = 0
+ t.examParams.state = 0
+ t.examParams.pageNum = 1
+ t.getExamList()
+ } else {
+ uni.$u.toast(res.message)
+ }
+ } else if (res.cancel) {
+ console.log('用户点击取消');
+ }
+ }
+ })
+ },
- const hDisplay = h > 0 ? String(h).padStart(2, '0') : '00';
- const mDisplay = m > 0 ? String(m).padStart(2, '0') : '00';
- const sDisplay = s > 0 ? String(s).padStart(2, '0') : '00';
- return `${hDisplay}:${mDisplay}:${sDisplay}`;
- },
+ secondsToHms(seconds) {
+ seconds = Number(seconds);
+ const h = Math.floor(seconds / 3600);
+ const m = Math.floor(seconds % 3600 / 60);
+ const s = Math.floor(seconds % 3600 % 60);
- upper(e) {
- // console.log(e)
- },
- lower(e) {
- //并且让页码+1,调用获取数据的方法获取第二页数据
- this.examParams.pageNum++
- //此处调用自己获取数据列表的方法
- if (this.examParams.pageNum > this.totalPage){
- uni.$u.toast('已加载全部数据')
- return
- }
- this.getExamList()
- },
- scrollView(e) {
- // console.log(e)
- },
+ const hDisplay = h > 0 ? String(h).padStart(2, '0') : '00';
+ const mDisplay = m > 0 ? String(m).padStart(2, '0') : '00';
+ const sDisplay = s > 0 ? String(s).padStart(2, '0') : '00';
+ return `${hDisplay}:${mDisplay}:${sDisplay}`;
+ },
- toCourses(){
- uni.switchTab({
- url: '/pages/tabBar/current/current'
- })
- },
+ upper(e) {
+ // console.log(e)
+ },
+ lower(e) {
+ //并且让页码+1,调用获取数据的方法获取第二页数据
+ this.examParams.pageNum++
+ //此处调用自己获取数据列表的方法
+ if (this.examParams.pageNum > this.totalPage) {
+ uni.$u.toast('已加载全部数据')
+ return
+ }
+ this.getExamList()
+ },
+ scrollView(e) {
+ // console.log(e)
+ },
+
+ toCourses() {
+ uni.switchTab({
+ url: '/pages/tabBar/current/current'
+ })
+ },
}
}
-
</script>
-<style lang="scss">
-.navBarBox .navBar {
- background-color:#fff;
- height: 50px;
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- box-shadow: 0 3px 12px rgba(0,0,0,0.05);
-
-}
-.fix{
- position: sticky;
- top: 0;
- left: 0;
- right: 0;
- width: 100%;
- z-index: 1;
-}
-.barText{
- /* text-align: center; */
- font-size: 16px;
- font-weight: 600;
- flex: 2;
- margin-left: 45%;
-}
-.statusBar{
- background-color:lightgrey;
-}
-.m-p-15{
- width: 100%;
- box-sizing: border-box;
- padding: 0 15px;
-}
-.card{
- width: 100%;
- margin-bottom: 40rpx;
+<style lang="scss" scoped>
+ .custom-navbar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 999;
+ background: #ffffff;
+ border-bottom: 1px solid #f0f0f0;
- .card-t{
- width: 100%;
- padding: 0 6rpx;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 20rpx;
-
- .card-t-l{
- font-size: 36rpx;
- font-weight: bold;
- }
- .card-t-r{
- color: #999;
- cursor: pointer;
- font-size: 28rpx;
- }
- .uni-stat__select{
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 2rpx 20rpx;
- border: 1rpx solid #ccc;
- border-radius: 99rpx;
- background: #fff;
- cursor: pointer;
-
-
- text{
- color: #999;
- font-size: 28rpx;
- margin-right: 6rpx;
+ .navbar-content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 44px;
+ padding-top: var(--status-bar-height);
}
- }
- }
- .card-c{
- background: #fff;
- border-radius: 20rpx;
- padding: 15px;
+ .nav-left {
+ flex-shrink: 0;
+ width: 80px;
+ padding-left: 15px;
+ box-sizing: border-box;
+ }
- ::v-deep .u-empty{
- margin-top: 40rpx !important;
+ .back-btn {
+ display: flex;
+ align-items: center;
+ padding: 8px 12px 8px 0;
+ }
+
+ .back-text {
+ font-size: 16px;
+ color: #000000;
+ }
+
+ .navbar-title {
+ flex: 1;
+ font-size: 16px;
+ text-align: center;
+ font-weight: bold;
+ color: #000000;
+ }
+
+ .nav-right {
+ flex-shrink: 0;
+ width: 80px;
+ }
+
+
}
-
- .card-i{
- padding-bottom: 15px;
- margin-bottom: 15px;
- border-bottom: 1px solid #f0f0f0;
- position: relative;
- display: flex;
- align-items: flex-start;
- box-sizing: border-box;
- &:last-of-type{
- margin-bottom: 0;
- padding-bottom: 0;
- border-bottom: none;
- }
- .card-i-t{
- position: absolute;
- width: 250rpx;
- height: 30px;
- border-radius: 8rpx;
- line-height: 30px;
- color: #fff;
- padding: 0 10rpx;
- box-sizing: border-box;
- left: 0;
- bottom: 0;
- background: rgba(0,0,0,.4);
- }
- .card-i-r{
- width: 100%;
- height: 200rpx;
- margin-left: 20rpx;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- .card-i-r-t{
- view{
- font-size: 36rpx;
- margin-bottom: 10rpx;
- font-family: "PingFang SC";
- font-weight: 800;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- }
- }
- .card-i-r-b{
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
+ .page-content {
+ min-height: calc(100vh - 44px);
+ }
- ::v-deep .u-button{
- width: 220rpx;
- margin: 0;
- box-shadow: 3px 3px 12px rgba(51,133,217,.3), -2px -2px 6px #fff;
- border: 1px solid rgba(255,255,255,.8);
- }
- }
- }
- }
- }
- .card-d{
- background: none;
- padding: 0 0 15px;
- .paper-card{
- background: #fff;
- margin-bottom: 15px;
- padding: 15px;
- box-sizing: border-box;
- position: relative;
- border-radius: 20rpx;
+ .m-p-15 {
+ width: 100%;
+ box-sizing: border-box;
+ padding: 0 15px;
+ }
- &:last-of-type{
- margin-bottom: 0;
- }
+ .card {
+ width: 100%;
+ margin-bottom: 40rpx;
- .paper-card-t{
- font-size: 36rpx;
- margin-bottom: 10rpx;
- font-family: "PingFang SC";
- font-weight: 800;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-
- .blue{
- font-size: 32rpx;
- color: #0f7ff9
- }
-
- .green{
- font-size: 32rpx;
- color: #5ac725
- }
- .red{
- font-size: 32rpx;
- color: #f56c6c
- }
- }
-
- .tag-area{
+ .card-t {
width: 100%;
- display: flex;
-
- ::v-deep .u-tag-wrapper{
- margin-right: 10rpx;
- }
- }
-
- .paper-card-b{
- display: flex;
- align-items: flex-end;
- justify-content: space-between;
-
-
- .btn-area{
+ padding: 0 6rpx;
+ box-sizing: border-box;
display: flex;
align-items: center;
-
- ::v-deep .u-button{
- width: 220rpx;
- margin: 0;
- box-shadow: 3px 3px 12px rgba(51,133,217,.3), -2px -2px 6px #fff;
- border: 1px solid rgba(255,255,255,.8);
+ justify-content: space-between;
+ margin-bottom: 20rpx;
+
+ .card-t-l {
+ font-size: 36rpx;
+ font-weight: bold;
}
- }
- .btn-area2{
- display: flex;
- align-items: center;
-
- ::v-deep .u-button{
- width: 150rpx;
- margin: 0;
-
- &:last-of-type{
- box-shadow: 3px 3px 12px rgba(51,133,217,.3), -2px -2px 6px #fff;
- border: 1px solid rgba(255,255,255,.8);
- margin-left: 20rpx;
+
+ .card-t-r {
+ color: #999;
+ cursor: pointer;
+ font-size: 28rpx;
+ }
+
+ .uni-stat__select {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 2rpx 20rpx;
+ border: 1rpx solid #ccc;
+ border-radius: 99rpx;
+ background: #fff;
+ cursor: pointer;
+
+
+ text {
+ color: #999;
+ font-size: 28rpx;
+ margin-right: 6rpx;
}
}
}
- }
- }
- }
-}
-.badge span{
- text-align: center;
- width: 100%;
-}
+ .card-c {
+ background: #fff;
+ border-radius: 20rpx;
+ padding: 15px;
+ ::v-deep .u-empty {
+ margin-top: 40rpx !important;
+ }
+
+ .card-i {
+ padding-bottom: 15px;
+ margin-bottom: 15px;
+ border-bottom: 1px solid #f0f0f0;
+ position: relative;
+ display: flex;
+ align-items: flex-start;
+ box-sizing: border-box;
+
+ &:last-of-type {
+ margin-bottom: 0;
+ padding-bottom: 0;
+ border-bottom: none;
+ }
+
+ .card-i-t {
+ position: absolute;
+ width: 250rpx;
+ height: 30px;
+ border-radius: 8rpx;
+ line-height: 30px;
+ color: #fff;
+ padding: 0 10rpx;
+ box-sizing: border-box;
+ left: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, .4);
+ }
+
+ .card-i-r {
+ width: 100%;
+ height: 200rpx;
+ margin-left: 20rpx;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ .card-i-r-t {
+ view {
+ font-size: 36rpx;
+ margin-bottom: 10rpx;
+ font-family: "PingFang SC";
+ font-weight: 800;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ }
+ }
+
+ .card-i-r-b {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ ::v-deep .u-button {
+ width: 220rpx;
+ margin: 0;
+ box-shadow: 3px 3px 12px rgba(51, 133, 217, .3), -2px -2px 6px #fff;
+ border: 1px solid rgba(255, 255, 255, .8);
+ }
+ }
+ }
+ }
+ }
+
+ .card-d {
+ background: none;
+ padding: 0 0 15px;
+
+ .paper-card {
+ background: #fff;
+ margin-bottom: 15px;
+ padding: 15px;
+ box-sizing: border-box;
+ position: relative;
+ border-radius: 20rpx;
+
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+
+ .paper-card-t {
+ font-size: 36rpx;
+ margin-bottom: 10rpx;
+ font-family: "PingFang SC";
+ font-weight: 800;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ .blue {
+ font-size: 32rpx;
+ color: #0f7ff9
+ }
+
+ .green {
+ font-size: 32rpx;
+ color: #5ac725
+ }
+
+ .red {
+ font-size: 32rpx;
+ color: #f56c6c
+ }
+ }
+
+ .tag-area {
+ width: 100%;
+ display: flex;
+
+ ::v-deep .u-tag-wrapper {
+ margin-right: 10rpx;
+ }
+ }
+
+ .paper-card-b {
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-between;
+
+
+ .btn-area {
+ display: flex;
+ align-items: center;
+
+ ::v-deep .u-button {
+ width: 220rpx;
+ margin: 0;
+ box-shadow: 3px 3px 12px rgba(51, 133, 217, .3), -2px -2px 6px #fff;
+ border: 1px solid rgba(255, 255, 255, .8);
+ }
+ }
+
+ .btn-area2 {
+ display: flex;
+ align-items: center;
+
+ ::v-deep .u-button {
+ width: 150rpx;
+ margin: 0;
+
+ &:last-of-type {
+ box-shadow: 3px 3px 12px rgba(51, 133, 217, .3), -2px -2px 6px #fff;
+ border: 1px solid rgba(255, 255, 255, .8);
+ margin-left: 20rpx;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .badge span {
+ text-align: center;
+ width: 100%;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.2