unknown
4 months ago
10 changed files with 1299 additions and 14 deletions
-
4main.js
-
12pages.json
-
262pages/exercises/brushQuestions/brushQuestions - 副本 (2).vue
-
162pages/exercises/brushQuestions/brushQuestions - 副本.vue
-
152pages/exercises/brushQuestions/brushQuestions.vue
-
434pages/exercises/exam/exam.vue
-
273pages/index/index - 副本 (2).vue
-
1pages/index/index - 副本.vue
-
8pages/index/index.vue
-
3uni.scss
@ -0,0 +1,262 @@ |
|||
<template> |
|||
<view class="content" id="brushQuestions"> |
|||
<up-navbar leftText=" " title="" :safeAreaInsetTop="false" :autoBack="true"> |
|||
<template #center> |
|||
<view class="u-nav-slot flex"> |
|||
<view class="btn" @click="changeNav(1)" :class="{active: currentNav==1}">答题模式</view> |
|||
<view class="btn" @click="changeNav(2)" :class="{active: currentNav==2}">背题模式</view> |
|||
</view> |
|||
</template> |
|||
</up-navbar> |
|||
|
|||
<view class="con padding"> |
|||
<view class="h1_row"> |
|||
<text class="tag">单选</text> |
|||
<text class="h1">机动车驾驶人在实习期内驾驶机动车不得牵引挂车。</text> |
|||
</view> |
|||
<view class="option"> |
|||
<view class="optionItem flex"> |
|||
<view class="icon"> |
|||
<image src="@/static/logo.png" mode=""></image> |
|||
</view> |
|||
<view class="text">正确</view> |
|||
</view> |
|||
</view> |
|||
<view class="answer flex"> |
|||
<view class="ans">正确答案是:<text>B</text></view> |
|||
<view class="ans">您的答案是:<text>B</text></view> |
|||
</view> |
|||
<view class="analysis"> |
|||
<view class="tit">题目解析</view> |
|||
<view class="txt">解析解析解析解析解析解析解析解析解析解析解析解析</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="con padding"> |
|||
<view class="h1_row"> |
|||
<text class="tag">单选</text> |
|||
<text class="h1">机动车驾驶人在实习期内驾驶机动车不得牵引挂车。</text> |
|||
</view> |
|||
<view class="option"> |
|||
<view class="optionItem flex"> |
|||
<view class="icon"> |
|||
<image src="@/static/logo.png" mode=""></image> |
|||
</view> |
|||
<view class="text">正确</view> |
|||
</view> |
|||
</view> |
|||
<view class="answer flex"> |
|||
<view class="ans">正确答案是:<text>B</text></view> |
|||
<view class="ans">您的答案是:<text>B</text></view> |
|||
</view> |
|||
<view class="analysis"> |
|||
<view class="tit">题目解析</view> |
|||
<view class="txt">解析解析解析解析解析解析解析解析解析解析解析解析</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="con padding"> |
|||
<view class="h1_row"> |
|||
<text class="tag">单选</text> |
|||
<text class="h1">机动车驾驶人在实习期内驾驶机动车不得牵引挂车。</text> |
|||
</view> |
|||
<view class="option"> |
|||
<view class="optionItem flex"> |
|||
<view class="icon"> |
|||
<image src="@/static/logo.png" mode=""></image> |
|||
</view> |
|||
<view class="text">正确</view> |
|||
</view> |
|||
</view> |
|||
<view class="answer flex"> |
|||
<view class="ans">正确答案是:<text>B</text></view> |
|||
<view class="ans">您的答案是:<text>B</text></view> |
|||
</view> |
|||
<view class="analysis"> |
|||
<view class="tit">题目解析</view> |
|||
<view class="txt">解析解析解析解析解析解析解析解析解析解析解析解析</view> |
|||
</view> |
|||
</view> |
|||
<u-popup :show="show" mode="center"> |
|||
<view> |
|||
<text>出淤泥而不染,濯清涟而不妖</text> |
|||
</view> |
|||
</u-popup> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
currentNav: '1', |
|||
show: true, |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(()=>{ |
|||
this.detectOrient(); |
|||
}) |
|||
|
|||
}, |
|||
methods: { |
|||
changeNav(val) { |
|||
console.log(window) |
|||
if(this.currentNav == val) return |
|||
this.currentNav = val |
|||
}, |
|||
detectOrient() { |
|||
var width = document.documentElement.clientWidth, |
|||
height = document.documentElement.clientHeight, |
|||
// $wrapper = document.getElementsByTagName('body')[0], |
|||
$wrapper = document.querySelector('#brushQuestions'), |
|||
style = ""; |
|||
if (width >= height) { // 横屏 |
|||
style += "width:" + width + "px;"; // 注意旋转后的宽高切换 |
|||
style += "height:" + height + "px;"; |
|||
style += "-webkit-transform: rotate(0); transform: rotate(0);"; |
|||
style += "-webkit-transform-origin: 0 0;"; |
|||
style += "transform-origin: 0 0;"; |
|||
console.log(1) |
|||
} else { // 竖屏 |
|||
style += "width:" + height + "px;"; |
|||
style += "height:" + width + "px;"; |
|||
style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);"; |
|||
// 注意旋转中点的处理 |
|||
style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;"; |
|||
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;"; |
|||
console.log(2) |
|||
} |
|||
$wrapper.style.cssText = style; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
uni-page-body { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
html{ |
|||
width: 100vh; |
|||
height: 100vw; |
|||
-webkit-transform: rotate(90deg); |
|||
-webkit-transform-origin: 50vw 50vw; |
|||
transform: rotate(90deg); |
|||
transform-origin: 50vw 50vw; |
|||
|
|||
} |
|||
|
|||
image {display: block;width: 100%;height: 100%;} |
|||
.content { |
|||
padding: 0rpx 0 0rpx 0rpx; |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: auto; |
|||
.u-nav-slot { |
|||
width: 306rpx; |
|||
height: 54rpx; |
|||
border-radius: 10rpx; |
|||
border: 1px solid #333333; |
|||
display: flex; |
|||
|
|||
.btn { |
|||
font-size: 24rpx; |
|||
color: #333333; |
|||
flex: 1; |
|||
text-align: center; |
|||
line-height: 54rpx; |
|||
|
|||
&.active { |
|||
background-color: #333333; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.con { |
|||
.h1_row { |
|||
margin-bottom: 50rpx; |
|||
.tag { |
|||
display: inline-block; |
|||
// width: 66px; |
|||
height: 36rpx; |
|||
line-height: 36rpx; |
|||
padding: 4rpx 6rpx; |
|||
background: #63C168; |
|||
border-radius: 6rpx; |
|||
margin-top: -2rpx; |
|||
margin-right: 16rpx; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
} |
|||
|
|||
text.h1 { |
|||
font-size: 36rpx; |
|||
} |
|||
} |
|||
|
|||
.option { |
|||
width: 100%; |
|||
.optionItem { |
|||
margin-bottom: 50rpx; |
|||
align-items: center; |
|||
.icon { |
|||
width: 56rpx; |
|||
height: 56rpx; |
|||
margin-right: 36rpx; |
|||
image { |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
|
|||
.text { |
|||
font-size: 32rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.answer { |
|||
height: 90rpx; |
|||
background: #F4F4F4; |
|||
line-height: 90rpx; |
|||
padding: 0 30rpx; |
|||
margin-top: 20rpx; |
|||
.ans { |
|||
margin-right: 60rpx; |
|||
text { |
|||
color: red; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.analysis { |
|||
margin-top: 60rpx; |
|||
.tit { |
|||
font-weight: 700; |
|||
font-size: 32rpx; |
|||
position: relative; |
|||
padding-left: 30rpx; |
|||
&::after { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 8rpx; |
|||
width: 6rpx; |
|||
height: 30rpx; |
|||
background: linear-gradient(0deg, #43EA80 0%, #38F8D4 100%); |
|||
border-radius: 3rpx; |
|||
} |
|||
} |
|||
|
|||
.txt { |
|||
margin-top: 39rpx; |
|||
font-size: 32rpx; |
|||
color: #333333; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,162 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<up-navbar leftText=" " title="" :safeAreaInsetTop="false" :autoBack="true"> |
|||
<template #center> |
|||
<view class="u-nav-slot flex"> |
|||
<view class="btn" @click="changeNav(1)" :class="{active: currentNav==1}">答题模式</view> |
|||
<view class="btn" @click="changeNav(2)" :class="{active: currentNav==2}">背题模式</view> |
|||
</view> |
|||
</template> |
|||
</up-navbar> |
|||
|
|||
<view class="con padding"> |
|||
<view class="h1_row"> |
|||
<text class="tag">单选</text> |
|||
<text class="h1">机动车驾驶人在实习期内驾驶机动车不得牵引挂车。</text> |
|||
</view> |
|||
<view class="option"> |
|||
<view class="optionItem flex"> |
|||
<view class="icon"> |
|||
<image src="@/static/logo.png" mode=""></image> |
|||
</view> |
|||
<view class="text">正确</view> |
|||
</view> |
|||
</view> |
|||
<view class="answer flex"> |
|||
<view class="ans">正确答案是:<text>B</text></view> |
|||
<view class="ans">您的答案是:<text>B</text></view> |
|||
</view> |
|||
<view class="analysis"> |
|||
<view class="tit">题目解析</view> |
|||
<view class="txt">解析解析解析解析解析解析解析解析解析解析解析解析</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
currentNav: '1' |
|||
} |
|||
}, |
|||
methods: { |
|||
changeNav(val) { |
|||
console.log(window) |
|||
if(this.currentNav == val) return |
|||
this.currentNav = val |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
image {display: block;width: 100%;height: 100%;} |
|||
.content { |
|||
padding: 120rpx 0 0 0; |
|||
.u-nav-slot { |
|||
width: 306rpx; |
|||
height: 54rpx; |
|||
border-radius: 10rpx; |
|||
border: 1px solid #333333; |
|||
display: flex; |
|||
|
|||
.btn { |
|||
font-size: 24rpx; |
|||
color: #333333; |
|||
flex: 1; |
|||
text-align: center; |
|||
line-height: 54rpx; |
|||
|
|||
&.active { |
|||
background-color: #333333; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.con { |
|||
.h1_row { |
|||
margin-bottom: 50rpx; |
|||
.tag { |
|||
display: inline-block; |
|||
// width: 66px; |
|||
height: 36rpx; |
|||
line-height: 36rpx; |
|||
padding: 4rpx 6rpx; |
|||
background: #63C168; |
|||
border-radius: 6rpx; |
|||
margin-top: -2rpx; |
|||
margin-right: 16rpx; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
} |
|||
|
|||
text.h1 { |
|||
font-size: 36rpx; |
|||
} |
|||
} |
|||
|
|||
.option { |
|||
width: 100%; |
|||
.optionItem { |
|||
margin-bottom: 50rpx; |
|||
align-items: center; |
|||
.icon { |
|||
width: 56rpx; |
|||
height: 56rpx; |
|||
margin-right: 36rpx; |
|||
image { |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
|
|||
.text { |
|||
font-size: 32rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.answer { |
|||
height: 90rpx; |
|||
background: #F4F4F4; |
|||
line-height: 90rpx; |
|||
padding: 0 30rpx; |
|||
margin-top: 20rpx; |
|||
.ans { |
|||
margin-right: 60rpx; |
|||
text { |
|||
color: red; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.analysis { |
|||
margin-top: 60rpx; |
|||
.tit { |
|||
font-weight: 700; |
|||
font-size: 32rpx; |
|||
position: relative; |
|||
padding-left: 30rpx; |
|||
&::after { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 8rpx; |
|||
width: 6rpx; |
|||
height: 30rpx; |
|||
background: linear-gradient(0deg, #43EA80 0%, #38F8D4 100%); |
|||
border-radius: 3rpx; |
|||
} |
|||
} |
|||
|
|||
.txt { |
|||
margin-top: 39rpx; |
|||
font-size: 32rpx; |
|||
color: #333333; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,434 @@ |
|||
<template> |
|||
<view class="content" id="brushQuestions"> |
|||
<view class="row row1"> |
|||
<view class="userInfoBox"> |
|||
<view class="examNo"> |
|||
<view class="h3">洛阳学车</view> |
|||
<view class="card">第01号台</view> |
|||
<view class="back"> |
|||
<u-icon name="arrow-left" size="16"></u-icon> |
|||
</view> |
|||
</view> |
|||
<view class="user"> |
|||
<view class="card"> |
|||
<view class="h3">考生信息</view> |
|||
<view class="avatar"> |
|||
<image src="@/static/logo.png" mode=""></image> |
|||
</view> |
|||
<view class="txt">姓名:大乔</view> |
|||
<view class="txt">性别:男</view> |
|||
<view class="txt">类型:小车</view> |
|||
<view class="txt">科目:科目一</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="examConBox"> |
|||
<view class="leftBox"> |
|||
<view class="h3">考试题目</view> |
|||
<view class="questionTxt"> |
|||
<view class="txt">32.如图所示,驾驶机动车遇到这种情况,以下做法正确的是?</view> |
|||
<view class="txt">A:减速慢行</view> |
|||
<view class="txt">B:减速慢行</view> |
|||
<view class="txt">C:减速慢行</view> |
|||
<view class="txt">D:减速慢行</view> |
|||
</view> |
|||
<view class="answer flex-b"> |
|||
<view class="lab">您的答案:</view> |
|||
<view class="rightSelect flex"> |
|||
<view class="lab">选项:</view> |
|||
<view class="optio flex"> |
|||
<view class="optionItem">A</view> |
|||
<view class="optionItem">B</view> |
|||
<view class="optionItem active">C</view> |
|||
<view class="optionItem">D</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="rightBox"> |
|||
右边盒子 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="row row2"> |
|||
<view class="timeBox"> |
|||
<view class="h3">考试时间</view> |
|||
<view class="time">15:10</view> |
|||
</view> |
|||
<view class="leftTpsBox"> |
|||
<view class="card"> |
|||
<view class="h3">操作提示</view> |
|||
<view class="txt">本题为单选题,请在备选答案中选择一个你认为正确的答案!</view> |
|||
</view> |
|||
</view> |
|||
<view class="rightBtnBox"> |
|||
<view class="btn hui">上一题</view> |
|||
<view class="btn hui">下一题</view> |
|||
<view class="btn">交卷</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="picBox"> |
|||
<view class="h3">考题图片</view> |
|||
<view class="imgBox"> |
|||
<image src="https://lyjp-bucket-main.oss-cn-beijing.aliyuncs.com/adf614ab07f86aebb0b7b3492e8ae500907389f08d238f49665e7ac47efd4bde.jpg" @click="previewImg" mode="aspectFit"></image> |
|||
</view> |
|||
<u-popup :show="show" mode="center"> |
|||
<view class="imgView"> |
|||
<view class="closeIcon" @click="show=false"> |
|||
<u-icon name="close-circle" color="#fff" size="28"></u-icon> |
|||
</view> |
|||
<view class="imgBox"> |
|||
<image src="https://lyjp-bucket-main.oss-cn-beijing.aliyuncs.com/adf614ab07f86aebb0b7b3492e8ae500907389f08d238f49665e7ac47efd4bde.jpg" mode="widthFix"></image> |
|||
</view> |
|||
</view> |
|||
</u-popup> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
currentNav: '1', |
|||
show: false, |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.detectOrient(); |
|||
}) |
|||
|
|||
}, |
|||
methods: { |
|||
previewImg(e) { |
|||
this.show = true |
|||
|
|||
// uni.previewImage({ |
|||
// current: 'https://lyjp-bucket-main.oss-cn-beijing.aliyuncs.com/adf614ab07f86aebb0b7b3492e8ae500907389f08d238f49665e7ac47efd4bde.jpg', |
|||
// urls: ['https://lyjp-bucket-main.oss-cn-beijing.aliyuncs.com/adf614ab07f86aebb0b7b3492e8ae500907389f08d238f49665e7ac47efd4bde.jpg'] |
|||
// }); |
|||
}, |
|||
detectOrient() { |
|||
var width = document.documentElement.clientWidth, |
|||
height = document.documentElement.clientHeight, |
|||
// $wrapper = document.getElementsByTagName('body')[0], |
|||
$wrapper = document.querySelector('#brushQuestions'), |
|||
style = ""; |
|||
if (width >= height) { // 横屏 |
|||
style += "width:" + width + "px;"; // 注意旋转后的宽高切换 |
|||
style += "height:" + height + "px;"; |
|||
style += "-webkit-transform: rotate(0); transform: rotate(0);"; |
|||
style += "-webkit-transform-origin: 0 0;"; |
|||
style += "transform-origin: 0 0;"; |
|||
console.log(1) |
|||
} else { // 竖屏 |
|||
style += "width:" + height + "px;"; |
|||
style += "height:" + width + "px;"; |
|||
style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);"; |
|||
// 注意旋转中点的处理 |
|||
style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;"; |
|||
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;"; |
|||
console.log(2) |
|||
} |
|||
$wrapper.style.cssText = style; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
uni-page-body { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
html { |
|||
width: 100vh; |
|||
height: 100vw; |
|||
-webkit-transform: rotate(90deg); |
|||
-webkit-transform-origin: 50vw 50vw; |
|||
transform: rotate(90deg); |
|||
transform-origin: 50vw 50vw; |
|||
|
|||
} |
|||
|
|||
image { |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.imgView { |
|||
position: relative; |
|||
background: none; |
|||
max-width: 80%; |
|||
padding: 50px; |
|||
.closeIcon { |
|||
position: absolute; |
|||
color: #fff; |
|||
top: 40rpx; |
|||
left: 40rpx; |
|||
z-index: 99; |
|||
background-color: #333; |
|||
border-radius: 50%; |
|||
} |
|||
.imgBox { |
|||
width: 100%; |
|||
} |
|||
} |
|||
.content { |
|||
padding: 30rpx 30rpx 0rpx 30rpx; |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background-color: #F7FBFE; |
|||
font-size: 20rpx; |
|||
|
|||
// display: flex; |
|||
.h3 { |
|||
position: absolute; |
|||
top: -16rpx; |
|||
left: 0; |
|||
width: 100%; |
|||
text-align: center; |
|||
color: $themC; |
|||
} |
|||
.row { |
|||
width: 100%; |
|||
display: flex; |
|||
.userInfoBox { |
|||
width: 140rpx; |
|||
// height: 408rpx; |
|||
// background-color: pink; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.examNo { |
|||
width: 100%; |
|||
height: 60rpx; |
|||
background: #FFFFFF; |
|||
border: 1px solid #F0F0F0; |
|||
position: relative; |
|||
|
|||
|
|||
.card { |
|||
line-height: 70rpx; |
|||
text-align: center; |
|||
padding-left: 20rpx; |
|||
} |
|||
|
|||
.back { |
|||
position: absolute; |
|||
left: -20rpx; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
background: #fff; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
u-icon { |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
.user { |
|||
// position: relative; |
|||
flex: 1; |
|||
height: 0; |
|||
padding: 10rpx 0 0 0rpx; |
|||
.h3 { |
|||
|
|||
} |
|||
|
|||
.card { |
|||
padding-left: 15rpx; |
|||
position: relative; |
|||
background: #FFFFFF; |
|||
border: 1px solid #F0F0F0; |
|||
height: 100%; |
|||
.avatar { |
|||
width: 90rpx; |
|||
height: 90rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
margin-top: 36rpx; |
|||
margin-bottom: 20rpx; |
|||
img { |
|||
|
|||
} |
|||
} |
|||
|
|||
.txt { |
|||
margin: 10px 0; |
|||
font-size: 18rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.examConBox { |
|||
width: 0; |
|||
flex: 1; |
|||
display: flex; |
|||
// height: 408rpx; |
|||
padding-left: 20rpx; |
|||
.leftBox { |
|||
flex: 2; |
|||
background-color: #fff; |
|||
position: relative; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.h3 { |
|||
left: 40rpx; |
|||
text-align: left; |
|||
} |
|||
|
|||
.questionTxt { |
|||
padding: 30rpx; |
|||
flex: 1; |
|||
line-height: 2em; |
|||
.txt { |
|||
|
|||
} |
|||
} |
|||
|
|||
.answer.flex-b { |
|||
height: 60rpx; |
|||
border-top: 1px solid #F0F0F0; |
|||
padding-left: 20rpx; |
|||
.lab { |
|||
|
|||
} |
|||
|
|||
.rightSelect { |
|||
|
|||
.lab { |
|||
|
|||
} |
|||
|
|||
.optio { |
|||
padding-left: 20rpx; |
|||
.optionItem { |
|||
width: 38rpx; |
|||
height: 38rpx; |
|||
border: 1px solid #F0F0F0; |
|||
font-size: 18rpx; |
|||
color: #333; |
|||
text-align: center; |
|||
line-height: 38rpx; |
|||
margin-right: 20rpx; |
|||
&.active { |
|||
color: #fff; |
|||
background-color: $themC; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.rightBox { |
|||
flex: 1; |
|||
background-color: blanchedalmond; |
|||
} |
|||
} |
|||
&.row1 { |
|||
flex: 4; |
|||
} |
|||
&.row2 { |
|||
height: 100rpx; |
|||
padding: 20rpx 0; |
|||
.timeBox { |
|||
width: 140rpx; |
|||
height: 100%; |
|||
background-color: #fff; |
|||
border: 1px solid #F0F0F0; |
|||
position: relative; |
|||
.h3 { |
|||
font-weight: 400; |
|||
} |
|||
.time { |
|||
font-weight: bold; |
|||
font-size: 24rpx; |
|||
color: #333333; |
|||
line-height: 60rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
} |
|||
|
|||
.leftTpsBox { |
|||
padding-left: 20rpx; |
|||
flex: 2; |
|||
position: relative; |
|||
.card { |
|||
background-color: #fff; |
|||
height: 100%; |
|||
} |
|||
.h3 { |
|||
text-align: left; |
|||
left: 40rpx; |
|||
} |
|||
.txt { |
|||
padding: 14rpx 20rpx 0 20rpx; |
|||
} |
|||
} |
|||
|
|||
.rightBtnBox { |
|||
flex: 1; |
|||
padding-left: 20rpx; |
|||
display: flex; |
|||
// justify-content: space-between; |
|||
justify-content: flex-end; |
|||
.btn { |
|||
width: 123rpx; |
|||
// padding: 0 24rpx; |
|||
margin-left: 20rpx; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
background: #F4F4F4; |
|||
border: 1px solid #E1DFDF; |
|||
line-height: 60rpx; |
|||
background: #F4F4F4; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
.picBox { |
|||
width: 100%; |
|||
flex: 2; |
|||
background-color: #fff; |
|||
border: 1px solid #F0F0F0; |
|||
padding: 20rpx; |
|||
position: relative; |
|||
.h3 { |
|||
text-align: left; |
|||
left: 40rpx; |
|||
} |
|||
.imgBox { |
|||
width: 650px; |
|||
// max-height: 163rpx; |
|||
// background-color: skyblue; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
margin: 0 auto; |
|||
} |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,273 @@ |
|||
<template> |
|||
<div class="w-table"> |
|||
<table id="cus-table" cellspacing="0"> |
|||
<!-- 综掘 --> |
|||
<tr> |
|||
<td rowspan="7">综掘</td> |
|||
<td>序号</td> |
|||
<td>名称</td> |
|||
<td>设计断面(m)</td> |
|||
<td>巷高(m)</td> |
|||
<td>巷宽(m)</td> |
|||
<td>日计划(m)</td> |
|||
<td>日完成(m)</td> |
|||
<td>月累计(m)</td> |
|||
<td>欠完原因</td> |
|||
</tr> |
|||
<tr> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td rowspan="6"> |
|||
<u-textarea |
|||
type="textarea" |
|||
:autosize="{ minRows: 10}" |
|||
placeholder="请输入" |
|||
v-model="diggReasonText"> |
|||
</u-textarea> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<!-- 综采 --> |
|||
<tr> |
|||
<td rowspan="3">综采</td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td rowspan="7"> |
|||
<u-textarea |
|||
type="textarea" |
|||
:autosize="{ minRows: 10}" |
|||
placeholder="请输入" |
|||
v-model="miniingReasonText"> |
|||
</u-textarea> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<!-- 原煤产量 --> |
|||
<tr> |
|||
<td colspan="2">原煤产量(吨)</td> |
|||
<td>日计</td> |
|||
<td></td> |
|||
<td>月累计</td> |
|||
<td></td> |
|||
<td></td> |
|||
<td>库存量</td> |
|||
<td></td> |
|||
</tr> |
|||
<!-- 销售量 --> |
|||
<tr> |
|||
<td colspan="2">销售量(吨)</td> |
|||
<td>日计</td> |
|||
<td></td> |
|||
<td>月累计</td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<!-- 洗煤产量 --> |
|||
<tr> |
|||
<td colspan="2">洗煤产量(吨)</td> |
|||
<td>日计</td> |
|||
<td></td> |
|||
<td>月累计</td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<!-- 矿值班领导 --> |
|||
<tr> |
|||
<td>矿值班领导</td> |
|||
<td></td> |
|||
<td>生产口</td> |
|||
<td colspan="2"></td> |
|||
<td colspan="2">行政口</td> |
|||
<td colspan="2"></td> |
|||
</tr> |
|||
<!-- 带班领导 --> |
|||
<tr> |
|||
<td>带班领导</td> |
|||
<td>0点班</td> |
|||
<td colspan="2"></td> |
|||
<td>8点班</td> |
|||
<td colspan="2"></td> |
|||
<td>4点班</td> |
|||
<td colspan="2"></td> |
|||
</tr> |
|||
<!-- 下井人数 --> |
|||
<tr> |
|||
<td>下井人数</td> |
|||
<td>0点班</td> |
|||
<td></td> |
|||
<td>8点班</td> |
|||
<td></td> |
|||
<td>4点班</td> |
|||
<td></td> |
|||
<td>合计</td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<!-- 安全生产信息汇总 --> |
|||
<tr> |
|||
<td rowspan="6">安全生产信息汇总</td> |
|||
<td rowspan="2">生产影响:</td> |
|||
<td colspan="8"></td> |
|||
</tr> |
|||
<tr> |
|||
<td colspan="8"></td> |
|||
</tr> |
|||
<tr> |
|||
<td rowspan="2">安全事故:</td> |
|||
<td colspan="8"></td> |
|||
</tr> |
|||
<tr> |
|||
<td colspan="8"></td> |
|||
</tr> |
|||
<tr> |
|||
<td rowspan="2">其他:</td> |
|||
<td colspan="8"></td> |
|||
</tr> |
|||
<tr> |
|||
<td colspan="8"></td> |
|||
</tr> |
|||
<tr> |
|||
<td>调度主任:</td> |
|||
<td colspan="6"> |
|||
<u-textarea |
|||
type="textarea" |
|||
:autosize="{ minRows: 1}" |
|||
placeholder="请输入" |
|||
v-model="directorReasonText"> |
|||
</u-textarea> |
|||
</td> |
|||
<td>填写人:</td> |
|||
<td colspan="2"> |
|||
<u-textarea |
|||
type="textarea" |
|||
:autosize="{ minRows: 1}" |
|||
placeholder="请输入" |
|||
v-model="filledBy"> |
|||
</u-textarea> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
diggReasonText: '什么?', // 综掘原因 |
|||
miniingReasonText: '', // 综采原因 |
|||
directorReasonText: '', // 调度主任 |
|||
filledBy: '' // 填写人 |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
.w-table { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
table td { |
|||
width: 168px; |
|||
height: 30px; |
|||
border: 1px solid rgba(0, 118, 200, .3); |
|||
background: transparent; |
|||
color: #7a9cc2; |
|||
font-size: 14px; |
|||
text-align: center; |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
::v-deep .el-textarea__inner { |
|||
background: transparent; |
|||
color: #fff; |
|||
border-radius: 0; |
|||
border: 1px solid rgba(0, 118, 200, .5); |
|||
} |
|||
::v-deep .el-textarea .u-textarea__count { |
|||
background: transparent; |
|||
} |
|||
</style> |
@ -1,17 +1,11 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<up-button type="primary" text="点我啊" @click="$goPage('/pages/exercises/chapter/chapter')"></up-button> |
|||
<!-- <u-view>点我啊</u-view> --> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref,reactive } from 'vue'; |
|||
import {onLoad,onReady} from "@dcloudio/uni-app" |
|||
import { getBannerList } from '@/config/api.js' |
|||
async function getBannerListFn() { |
|||
const {data: res} = await getBannerList() |
|||
console.log(res) |
|||
} |
|||
getBannerListFn() |
|||
|
|||
</script> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue