hywen
/
YNUtdPlatform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式优化

This commit is contained in:
binbin_pan 2024-12-30 18:48:10 +08:00
parent fa1daf92ea
commit f5f25b2ea6
7 changed files with 254 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
common/uni.css
View File

@ -3,6 +3,7 @@
font-weight: normal;
font-style: normal;
src: url('~@/static/uni.ttf') format('truetype');
src: url('~@/static/fonts/SourceHanSansSC-VF.ttf') format('truetype');
}
/* #ifdef H5 */

23
pages/YNEduApp/index/index.vue
View File

@ -7,15 +7,10 @@
suffixIcon="search"
v-model="keyword"
placeholder="请输入搜索关键词"
@iconClick="toggleSearch"
@blur="toggleSearch"
></uni-easyinput>
</view>
<view class="opt-grids">
<view v-for="(part, index) in opts" :key="index" @click="jumpUrl(part.url)">
<image :src="part.src" mode="" style="width: 58px; height: 58px;"></image>
<span>{{ part.name }}</span>
</view>
</view>
<view class="swipe-area">
<swiper class="swiper-box" autoplay interval="3000" indicator-dots="true">
<swiper-item v-for="(item, index) in imgList" :key="index">
@ -23,6 +18,13 @@
</swiper-item>
</swiper>
</view>
<view class="opt-grids">
<view v-for="(part, index) in opts" :key="index" @click="jumpUrl(part.url)">
<image :src="part.src" mode="" style="width: 58px; height: 58px;"></image>
<span>{{ part.name }}</span>
</view>
</view>
<uni-notice-bar
show-icon
scrollable
@ -245,14 +247,13 @@ export default {
<style lang="scss">
.page {
width: 100vw;
height: 100vh;
background-color: #f8f8f8;
box-sizing: border-box;
padding: 0 20px;
.search {
width: 100%;
margin: 10px auto 0;
margin: 3vh auto 0;
display: flex;
align-items: center;
}
@ -284,14 +285,14 @@ export default {
}
.swipe-area {
margin-top: 3vh;
width: 100%;
height: 20vh;
border-radius: 15rpx;
overflow: hidden;
margin-bottom: 10rpx;
}
.my-task {
margin-bottom: 3vh;
width: 100%;
height: 40vh;
background-color: #fff;

129
pages/YNEduApp/learnProj/learnProj.vue
View File

@ -1,21 +1,39 @@
<template>
<view class="page">
<u-navbar title="学习项目" @leftClick="leftClick" placeholder />
<div class="tab-wrapper">
<div v-for="(item, index) in statusList" :key="index" class="tab-item" @click="chooseStatus(item, index)">
<div :style="{ color: activeIndex === index ? '#409eff' : '#333' }">
{{ item.text }}
<div class="wrapper">
<div class="tab-wrapper">
<div v-for="(item, index) in statusList" :key="index" class="tab-item" @click="chooseStatus(item, index)">
<div :style="{ color: activeIndex === index ? '#409eff' : '#333' }">
{{ item.text }}
</div>
<div :class="{ 'tab-line': activeIndex === index }"></div>
</div>
</div>
<uni-easyinput
suffixIcon="search"
v-model="totalStatus.keyword"
placeholder="请输入项目名称"
@blur="toggleSearch"
style="margin-bottom: 10px"
></uni-easyinput>
<!-- 查询 -->
<div class="status-secs">
<div class="item" @click="openPicker(1)">
<span>学习类型</span>
<u-icon name="arrow-down-fill" color="#D8D8D8" size="9"></u-icon>
</div>
<div class="item" @click="openPicker(2)">
<span>逾期状态</span>
<u-icon name="arrow-down-fill" color="#D8D8D8" size="9"></u-icon>
</div>
<div class="item" @click="openPicker(3)">
<span>合格状态</span>
<u-icon name="arrow-down-fill" color="#D8D8D8" size="9"></u-icon>
</div>
<div :class="{ 'tab-line': activeIndex === index }"></div>
</div>
</div>
<uni-easyinput
suffixIcon="search"
v-model="totalStatus.keyword"
placeholder="请输入项目名称"
@iconClick="toggleSearch"
style="margin-bottom: 10px"
></uni-easyinput>
<view class="project-cont">
<view v-for="(item, index) in projList" :key="item.id" class="single-proj" @click="toggleDetail(item.id)">
@ -51,6 +69,16 @@
<image src="/static/images/zanwuneirong.png" mode="aspectFit" />
<view class="no-data-text">暂无内容</view>
</div>
<!-- 选择器 -->
<u-picker
v-if="showPicker"
:show="showPicker"
:columns="[columns]"
keyName="label"
@cancel="showPicker = false"
@confirm="confirmPicker"
></u-picker>
</view>
</template>
@ -61,6 +89,8 @@ import config from '@/config'
export default {
data() {
return {
showPicker: false,
columns: [],
activeIndex: 0,
statusList: [
// status -1: 全部 1: 已完成 0: 未完成
@ -77,26 +107,20 @@ export default {
qualStatus: '',
signupStatus: ''
},
// 状态选项
// 学习类型
learnTypeRange: [
{ text: '学习类型', value: '' },
{ text: '不学', value: 1 },
{ text: '要学', value: 2 }
{ label: '不学', value: 1 },
{ label: '要学', value: 2 }
],
// 逾期状态
outDateStatusRange: [
{ text: '逾期状态', value: '' },
{ text: '临期', value: 1 },
{ text: '过期', value: 2 }
{ label: '临期', value: 1 },
{ label: '过期', value: 2 }
],
// 合格状态
qualStatusRange: [
{ text: '合格状态', value: '' },
{ text: '合格', value: 1 },
{ text: '不及格', value: 2 }
],
signupStatusRange: [
{ text: '报名状态', value: '' },
{ text: '报了', value: 1 },
{ text: '没报', value: 2 }
{ label: '合格', value: 1 },
{ label: '不及格', value: 2 }
],
// 项目列表
projList: []
@ -106,6 +130,24 @@ export default {
this.getList()
},
methods: {
openPicker(type) {
console.log('🚀 ~ openPicker ~ type:', type)
this.columns = []
if (type === 1) {
this.columns = this.learnTypeRange
} else if (type === 2) {
this.columns = this.outDateStatusRange
} else if (type === 3) {
this.columns = this.qualStatusRange
} else if (type === 4) {
this.columns = this.signupStatusRange
}
this.showPicker = true
},
confirmPicker(e) {
console.log('🚀 ~ confirmPicker ~ e:', e)
this.showPicker = false
},
async getList() {
const params = {
userId: uni.getStorageSync('userId'),
@ -205,6 +247,10 @@ export default {
</script>
<style lang="scss">
.wrapper {
padding: 0 10px;
background-color: #fff;
}
.tab-wrapper {
display: flex;
justify-content: space-around;
@ -242,25 +288,21 @@ export default {
height: 100vh;
background-color: #f8f8f8;
box-sizing: border-box;
padding: 0 10px;
.status-secs {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1vh;
view {
box-sizing: border-box;
padding: 0 15rpx;
font-size: 18px;
color: #9ea2ac;
font-weight: bold;
}
.active {
font-size: 28px;
color: #000;
font-size: 16px;
font-weight: 800;
margin-bottom: 10px;
padding-bottom: 10px;
.item {
display: flex;
align-items: center;
span {
margin-right: 5px;
}
}
}
@ -271,8 +313,7 @@ export default {
}
.project-cont {
width: 100%;
height: 10rpx;
padding: 0 10px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;

111
pages/YNEduApp/prac/exercises.vue
View File

@ -2,23 +2,34 @@
<view class="wrapper" :style="{ fontSize: fontSize + 'px' }">
<u-navbar leftIcon="" title="" :placeholder="true">
<view class="u-nav-slot" slot="right">
<u-tag text="小" :type="fontSize == 19 ? 'primary' : 'info'" @click="changeFont(19)" style="margin-right: 8px" ></u-tag>
<u-tag text="中" :type="fontSize == 21 ? 'primary' : 'info'" @click="changeFont(21)" style="margin-right: 8px"></u-tag>
<span style="font-size: 13px; color: #ccc; margin-right: 5px">字体大小</span>
<u-tag
text="小"
:type="fontSize == 19 ? 'primary' : 'info'"
@click="changeFont(19)"
style="margin-right: 8px"
></u-tag>
<u-tag
text="中"
:type="fontSize == 21 ? 'primary' : 'info'"
@click="changeFont(21)"
style="margin-right: 8px"
></u-tag>
<u-tag text="大" :type="fontSize == 23 ? 'primary' : 'info'" @click="changeFont(23)"></u-tag>
</view>
</u-navbar>
<div class="top-time">已用时间 {{ usedTime }}</div>
<div class="num-wrapper">
<div class="correct">
<u-icon name="/static/images/true.png" :size="fontSize" />
<u-icon name="/static/images/true.png" :size="fontSize + 2" />
<div class="num">{{ trueNum }}</div>
</div>
<div class="error">
<u-icon name="/static/images/error.png" :size="fontSize" />
<u-icon name="/static/images/error.png" :size="fontSize + 2" />
<div class="num">{{ falseNum }}</div>
</div>
<div class="total" @click="openSelect">
<u-icon name="/static/images/quanbufenlei.png" :size="fontSize" />
<u-icon name="/static/images/quanbufenlei.png" :size="fontSize + 2" />
<div class="num">{{ nowNum }}/{{ allNum }}</div>
</div>
</div>
@ -206,12 +217,31 @@
</u-modal>
<!-- 题目选择弹框 -->
<u-modal :show="showModalSelect" title="题目选择" @confirm="showModalSelect = false">
<view class="slot-content">
<div class="topic-content">
<u-popup
:show="showModalSelect"
@close="showModalSelect = false"
mode="center"
round="10"
customStyle="width: 90%; height: 50%"
>
<div class="num-wrapper">
<div class="correct">
<u-icon name="/static/images/true.png" :size="fontSize + 2" />
<div class="num">{{ trueNum }}</div>
</div>
<div class="error">
<u-icon name="/static/images/error.png" :size="fontSize + 2" />
<div class="num">{{ falseNum }}</div>
</div>
<div class="total">
<u-icon name="/static/images/quanbufenlei.png" :size="fontSize + 2" />
<div class="num">{{ nowNum }}/{{ allNum }}</div>
</div>
</div>
<div class="topic-content">
<div class="wrap" v-for="(item, index) in questionListSelect" :key="index">
<div
v-for="(item, index) in questionListSelect"
:key="index"
class="topic-wrapper"
:class="{ correct: item.isTrue == 1, error: item.isTrue == 0 }"
@click="handleJump('jump', item.index)"
@ -220,8 +250,8 @@
<div class="topic">{{ item.index }}</div>
</div>
</div>
</view>
</u-modal>
</div>
</u-popup>
<u-loading-page :loading="isLoading"></u-loading-page>
</view>
@ -245,6 +275,7 @@ export default {
data() {
return {
isLoading: false,
isAddLoading: false,
practiceId: '', // 练习id
recordId: '', // 记录id
isNew: 1, // 是否新练习
@ -279,7 +310,8 @@ export default {
startY: 0, // 起始触摸点Y坐标
endX: 0, // 结束触摸点X坐标
endY: 0, // 结束触摸点Y坐标
fontSize: 19
fontSize: 19,
isError: false // 是否错题消除
}
},
onLoad(opt) {
@ -410,6 +442,8 @@ export default {
// 跳题
handleJump(item, index) {
console.log('🚀 ~ handleJump ~ item:', item, this.recordId)
if (this.isAddLoading) return
this.isAddLoading = true
if (item === 'prev') {
this.nowNum--
if (this.nowNum < 1) {
@ -451,6 +485,7 @@ export default {
},
success: res => {
console.log('🚀 ~ handleJump ~ res:', res)
this.isAddLoading = false
res = res.data
this.questionList.push(res.data)
if (res.data.selectAnswer) {
@ -489,6 +524,7 @@ export default {
},
fail: err => {
console.log(err)
this.isAddLoading = false
}
})
},
@ -834,7 +870,8 @@ export default {
},
// 打开题目选择弹框
openSelect() {
this.isLoading = true
if (this.isAddLoading) return
this.isAddLoading = true
// const res = await this.getPracticeQuestionList()
// console.log('🚀 ~ openSelect ~ res:', res)
// this.questionListSelect = res.data
@ -854,13 +891,14 @@ export default {
},
success: res => {
this.showModalSelect = true
this.isAddLoading = false
console.log('🚀 ~ getPracticeQuestionList ~ res:', res)
res = res.data
this.questionListSelect = res.data
},
fail: err => {
this.isLoading = false
console.log(err)
this.isAddLoading = false
}
})
},
@ -952,31 +990,36 @@ export default {
}
}
}
}
.topic-content {
display: flex;
/* justify-content: space-between; */
align-items: flex-start;
flex-wrap: wrap;
overflow: auto;
.topic-content {
height: 300px;
.wrap {
width: 20%;
display: flex;
justify-content: flex-start;
justify-content: center;
align-items: center;
flex-wrap: wrap;
overflow: auto;
.topic-wrapper {
width: 30px;
height: 30px;
border: 1px solid #409eff;
border-radius: 5px;
width: 40px;
height: 40px;
border: 1px solid #ccc;
border-radius: 3px;
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
margin: 8px;
.topic {
color: #409eff;
color: #ccc;
}
// 正确背景
&.correct {
background: #67d279;
color: #fff;
border: none;
.topic {
color: #fff;
}
@ -985,6 +1028,7 @@ export default {
&.error {
background: #f0514c;
color: #fff;
border: none;
.topic {
color: #fff;
}
@ -995,10 +1039,11 @@ export default {
.bottom-btn {
position: fixed;
bottom: 30px;
bottom: 16px;
left: 0;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
.btn {
width: 100px;
@ -1019,7 +1064,7 @@ export default {
.question-wrapper {
height: 64vh;
overflow: auto;
padding: 30px;
padding: 20px;
color: #08428d;
.title {
@ -1033,8 +1078,9 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
background: #ffffff;
background: #f8f8f8;
border-radius: 8px;
border: 1px solid #ccc;
overflow: auto;
.label-wrapper {
overflow: auto;
@ -1064,13 +1110,12 @@ export default {
.top-time {
text-align: center;
color: #333;
padding-top: 60px;
}
.num-wrapper {
display: flex;
justify-content: center;
margin-top: 20px;
justify-content: space-around;
margin: 15px 6%;
.correct,
.error,

119
pages/YNEduApp/prac/pracDetail.vue
View File

@ -10,43 +10,69 @@
<div class="left">
<div class="item">
<u-icon name="/static/images/accuracy.png" size="50" />
<div class="text">
<div>正确率</div>
<div>{{ correctRate }}</div>
</div>
<div>正确率</div>
<div>{{ correctRate || '0%' }}</div>
</div>
<div class="item">
<u-icon name="/static/images/accumulative-answer.png" size="50" />
<div class="text">
<div>累计作答</div>
<div>{{ totalAnswer }}</div>
</div>
<div>累计作答</div>
<div>{{ totalAnswer || 0 }}</div>
</div>
<div class="item">
<u-icon name="/static/images/accumulative-total.png" size="50" />
<div class="text">
<div>累计答对</div>
<div>{{ totalCorrect }}</div>
</div>
<div>累计答对</div>
<div>{{ totalCorrect || 0 }}</div>
</div>
</div>
<div class="right">
<div class="right-top">
<div class="right-text">顺序练习</div>
<div class="btn" v-if="!isNew">
<u-button type="primary" plain shape="circle" text="继续上次练习" @click="handleExercises(1)"></u-button>
</div>
<div class="btn">
<u-button type="primary" plain shape="circle" text="开始新的练习" @click="handleExercises(2)"></u-button>
<div class="btn-wrap">
<div class="btn" v-if="!isNew">
<u-button
type="primary"
plain
shape="circle"
text="继续上次练习"
style="background: #f6f6f6"
@click="handleExercises(1)"
></u-button>
</div>
<div class="btn">
<u-button
type="primary"
plain
shape="circle"
text="开始新的练习"
style="background: #f6f6f6"
@click="handleExercises(2)"
></u-button>
</div>
</div>
</div>
<div class="right-bottom">
<div class="right-text">随机练习</div>
<div class="btn" v-if="!isNew">
<u-button type="primary" plain shape="circle" text="继续上次练习" @click="handleExercises(3)"></u-button>
</div>
<div class="btn">
<u-button type="primary" plain shape="circle" text="开始新的练习" @click="handleExercises(4)"></u-button>
<div class="btn-wrap">
<div class="btn" v-if="!isNew">
<u-button
type="primary"
plain
shape="circle"
text="继续上次练习"
style="background: #f6f6f6"
@click="handleExercises(3)"
></u-button>
</div>
<div class="btn">
<u-button
type="primary"
plain
shape="circle"
text="开始新的练习"
style="background: #f6f6f6"
@click="handleExercises(4)"
></u-button>
</div>
</div>
</div>
</div>
@ -196,8 +222,7 @@ export default {
display: flex;
justify-content: space-between;
.left {
width: 52%;
/* height: 209px; */
width: 33%;
background: #5185ed;
border-radius: 8px;
display: flex;
@ -207,62 +232,62 @@ export default {
.item {
padding: 0 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
&:first-child {
margin-left: -8px;
}
.text {
color: #fff;
font-size: 16px;
font-weight: 500;
margin-left: 10px;
display: flex;
flex-direction: column;
align-items: center;
}
color: #fff;
font-size: 16px;
font-weight: 500;
}
}
.right {
width: 43%;
width: 63%;
display: flex;
flex-direction: column;
justify-content: space-between;
.btn {
width: 80%;
width: 89%;
margin: 10px auto;
}
.right-top {
height: 158px;
background: #e7ac67;
/* background: url('../../../static/images/order-exercises.png') no-repeat; */
/* background: url('/static/images/order-exercises.png') no-repeat; */
background-size: 100% 98px;
border-radius: 8px;
position: relative;
/* position: relative; */
margin-bottom: 10px;
/* display: flex;
flex-direction: column;
justify-content: space-around; */
// top-icon - 在当前位置的右下角
.top-icon {
/* .top-icon {
position: absolute;
right: 0;
bottom: 0;
}
} */
}
.right-bottom {
height: 158px;
background: #73c2f7;
border-radius: 8px 8px 8px 8px;
position: relative;
/* position: relative; */
// bottom-icon - 在当前位置的左下角
.bottom-icon {
/* .bottom-icon {
position: absolute;
left: 0;
bottom: 0;
}
} */
}
.btn-wrap {
height: 95px;
display: flex;
flex-direction: column;
justify-content: center;
}
.right-text {

12
pages/YNEduApp/user/user.vue
View File

@ -4,9 +4,9 @@
<view class="user-avatar">
<image src="/static/images/user.png"></image>
</view>
<view class="user-info" style="height: 120px;">
<view class="user-info" style="height: 120px">
<span style="font-size: 24px">{{ userName }}</span>
<span style="font-size: 12px; color: #8a8a8b; overflow: auto;">{{ className }}</span>
<span style="font-size: 12px; color: #8a8a8b; overflow: auto">{{ className }}</span>
</view>
<view class="edit-btn">
<view @click="handleEdit">修改资料</view>
@ -60,7 +60,7 @@ export default {
secList: [
// { id: 1, title: '切换门户', src: '/static/eduImg/changeGate.png', path: 'changeGate' },
// { id: 2, title: '人脸识别', src: '/static/eduImg/faceScan.png', path: 'faceScan' },
{ id: 3, title: '我的消息', src: '/static/eduImg/myMsg.png', path: 'myMsg' },
{ id: 3, title: '我的消息', src: '/static/eduImg/myMsg.png', path: 'myMsg' }
// { id: 4, title: '设置', src: '/static/eduImg/settings.png', path: 'settings' }
],
token: uni.getStorageSync('access_token')
@ -80,7 +80,7 @@ export default {
},
// 获取自学-学时-证书
getLearnStats() {
console.log('🚀 ~ getLearnStats ~ this.token:',uni.getStorageSync('access_token'))
console.log('🚀 ~ getLearnStats ~ this.token:', uni.getStorageSync('access_token'))
this.$verificationToken()
uni.request({
url: config.baseUrl + '/exam-student/personalCenter/getStudyAndCer',
@ -207,7 +207,7 @@ export default {
background-color: #fff;
border-radius: 15rpx;
box-sizing: border-box;
padding: 4vh 3vw;
padding: 10px;
color: #727272;
.single-sec {
@ -217,7 +217,7 @@ export default {
font-size: 14px;
display: flex;
align-items: center;
border-bottom: 1px solid #f6f6f6;
/* border-bottom: 1px solid #f6f6f6; */
.lef-icon {
width: 5%;

BIN
static/fonts/SourceHanSansSC-VF.ttf Normal file
View File

Binary file not shown.