Skip to content

E
educationStu
Commit e55a44a5 authored by Mac's avatar Mac
Browse files
Options

各个组件

parent 98bf59c8
Hide whitespace changes
Inline Side-by-side
Showing with 577 additions and 0 deletions
src/components/word/choiceQuestion.vue 0 → 100644
View file @ e55a44a5
<style scoped>
.choiceQuestion{
width: 100vw;
height: 100vh;
background: #F5F5F5;
box-sizing: border-box;
}
.box{
width: 100%;
box-sizing: border-box;
padding: 0 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.dc{
font-size: 30px;
color: #111111;
font-weight: bold;
margin-top: 160rpx;
}
.dclx{
padding:4px 6px ;
border-radius: 3px;
background: #E8E9EA;
font-size: 14px;
color: #666666;
margin-top: 18px;
}
.choicelist{
margin-top: 100px;
width: 100%;
}
.choice-item{
height: 106rpx;
border-radius: 54rpx;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #111111;
margin-bottom: 19px;
position: relative;
}
.correct{
background: #4C50E7;
color: #FFFFFF;
}
.sign{
position: absolute;
right: 33px;
top: 36rpx;
}
.error{
background: #F66633;
color: #FFFFFF;
}
</style>
<template>
<view class="choiceQuestion">
<view class="box">
<view class="dc">火曜日</view>
<view class="dclx">名词</view>
<view class="choicelist">
<view class="choice-item"
:class="{'correct':(current ==answer && current!=0 && x.Id == current) || (x.Id==answer && current!=answer && current!=0),
'error':current!=0 && x.Id ==current && current!=answer
}"
v-for="(x,y) in list" :key='y' @click="choice(x)">
{{x.Name}}
<view class="sign" v-if="(current ==answer && current!=0 && x.Id == current) || (x.Id==answer && current!=answer && current!=0)">
<van-icon name="success" color="#5DE3A6" size='40rpx'/>
</view>
<view class="sign" v-if="current!=0 && x.Id ==current && current!=answer ">
<van-icon name="cross" color="#FFF" size='40rpx' />
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {ref,reactive,toRefs,toRef,getCurrentInstance,watch,computed,onMounted,provide} from "vue";
export default {
props: ['current','answer'],
setup(props,{attrs,slots,emit}) {
let data = reactive({
list:[//选择列表
{Id:1,Name:'ないこと'},
{Id:2,Name:'ざってい'},
{Id:3,Name:'ないこと'},
{Id:4,Name:'ないこと'},
],
current:props.current!=''?props.current:0,//用户选择
answer:props.answer,//答案
})
let methods = {
choice(x){
if(data.current ==0){
data.current = x.Id;
//调取页面
emit('choice',data.current)
}
}
}
onMounted(()=>{
})
let that = methods;
return {
...toRefs(data),
...methods,
};
}
}
</script>
src/components/word/explain.vue 0 → 100644
View file @ e55a44a5
<style scoped>
.explain{
width: 100vw;
height: 100vh;
background: #F5F5F5;
box-sizing: border-box;
padding: 18px;
}
.box{
width: 100%;
box-sizing: border-box;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 12px;
background: #FFF;
}
.box-top{
height: calc(100vh - 90rpx - 36px);
overflow-y: auto;
width: 100%;
}
.box-b{
width: 292rpx;
height: 90rpx;
background: #E4E5FB;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #4C50E7;
border-radius: 45rpx;
}
.dc{
font-size: 30px;
color: #111111;
font-weight: bold;
}
.dclx{
padding:4px 6px ;
border-radius: 3px;
background: #E8E9EA;
font-size: 14px;
color: #666666;
}
</style>
<template>
<view class="explain">
<view class="box">
<view class="box-top">
<view class="dc">火曜日</view>
<view style="display: flex;align-items: center;flex-wrap: wrap;margin-top: 18px;">
<view class="dclx">名词</view>
<view style="font-size: 14px;color: #999999;margin:0 13px">[げつようび]</view>
<image style="width: 16px;height: auto;" mode="widthFix" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/laba2x.png"></image>
</view>
<view style="width: 100%;height: 1px;background: #333F53;margin: 20px 0;"></view>
<view style="font-size: 16px;font-weight: bold;color: #111111;">星期2</view>
</view>
<view class="box-b" @click="">继续做题</view>
</view>
</view>
</template>
<script>
import {ref,reactive,toRefs,toRef,getCurrentInstance,watch,computed,onMounted,provide} from "vue";
export default {
props: ['current','answer'],
setup(props,{attrs,slots,emit}) {
let data = reactive({
})
let methods = {
}
onMounted(()=>{
})
let that = methods;
return {
...toRefs(data),
...methods,
};
}
}
</script>
src/components/word/fillInTheBlanks.vue 0 → 100644
View file @ e55a44a5
<style scoped>
.fillInTheBlanks{
width: 100vw;
height: 100vh;
background: #F5F5F5;
box-sizing: border-box;
}
.box{
width: 100%;
box-sizing: border-box;
padding: 0 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.dc{
font-size: 26px;
color: #111111;
font-weight: bold;
margin-top: 160rpx;
}
.dclx{
padding:4px 6px ;
border-radius: 3px;
background: #E8E9EA;
font-size: 14px;
color: #666666;
margin-top: 18px;
word-wrap: break-word;
}
.dclx2{
font-size: 16px;
font-weight: 500;
color: #111111;
margin-top: 30px;
}
.btn{
width: 100%;
height: 106rpx;
border-radius: 54rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #4C50E7;
margin-top: 160rpx;
background: #E4E5FB;
position: relative;
}
.correct{
background: #4C50E7;
color: #FFFFFF;
}
.sign{
position: absolute;
right: 33px;
top: 36rpx;
}
.error{
background: #F66633;
color: #FFFFFF;
}
.row{
display: flex;
align-items: center;
flex-wrap: wrap;
}
</style>
<template>
<view class="fillInTheBlanks">
<view class="box">
<view class="dc row" >
<text>火曜日</text>
<mypone maxlength="2" v-model="test" style="display: inline-block;"></mypone>
<text>日sa</text>
</view>
<view class="dclx">名词</view>
<view class="dclx2">今天是星期二</view>
<view class="btn" v-if="type==0" @click="getjieguo">确定</view>
<view class="btn correct" v-if="type==1">正确
<view class="sign" >
<van-icon name="success" color="#5DE3A6" size='40rpx'/>
</view>
</view>
<view class="btn error" v-if="type==2">错误
<view class="sign" >
<van-icon name="cross" color="#FFF" size='40rpx' />
</view>
</view>
</view>
</view>
</template>
<script>
import {ref,reactive,toRefs,toRef,getCurrentInstance,watch,computed,onMounted,provide} from "vue";
import mypone from './myp-one.vue'
export default {
props: ['current','answer'],
components: {
mypone
},
setup(props,{attrs,slots,emit}) {
let data = reactive({
test:'',
type:0,//1是正确 2是错误
})
let methods = {
getjieguo(){
if(data.test==''){
uni.showToast({
title:'请输入',
icon:'none'
})
return
}
//去掉接口
}
}
onMounted(()=>{
})
let that = methods;
return {
...toRefs(data),
...methods,
};
}
}
</script>
src/components/word/myp-one.vue 0 → 100644
View file @ e55a44a5
<template>
<view class="code-box">
<view class="flex-box">
<input :value="inputValue" type="text" :focus="autoFocus" :maxlength="maxlength" class="hide-input" @input="getVal" />
<block v-for="(item, index) in ranges" :key="index">
<view :class="['item', { active: codeIndex === item, middle: type === 'middle', bottom: type === 'bottom', box: type === 'box' }]">
<view class="line" v-if="type !== 'middle'"></view>
<view v-if="type === 'middle' && codeIndex <= item" class="bottom-line"></view>
<block v-if="isPwd && codeArr.length >= item">
<text class="dot">.</text>
</block>
<block v-else> {{ codeArr[index] ? codeArr[index] : ''}}</block>
</view>
</block>
</view>
</view>
</template>
<script>
// 支持使用 v-model
// 支持使用refs
// 打个广告：
// 全新的 UI 组件来袭：mypUI-nvue页面，uni-app模式，一套组件对应mp/h5/app
export default {
name: 'mypOneInput',
props: {
// 支持外部提供，支持使用v-model
// 支持通过value来做清空
value: {
type: String,
default: ''
},
// 4/6
maxlength: {
type: Number,
default: 4
},
autoFocus: {
type: Boolean,
default: false
},
isPwd: {
type: Boolean,
default: false
},
// middle-middle line, bottom-bottom line, box-square box
type: {
type: String,
default: "bottom"
}
},
watch: {
maxlength: {
immediate: true,
handler: function(newV) {
this.ranges = [];
for(let i=1;i<=newV;i++){
this.ranges.push(Number(i))
}
}
},
value: {
immediate: true,
handler: function(newV) {
if (newV !== this.inputValue) {
this.inputValue = newV
this.toMakeAndCheck(newV)
}
}
}
},
data() {
return {
inputValue: '',
codeIndex: 1,
codeArr: [],
ranges: [1, 2, 3, 4]
}
},
methods: {
getVal(e) {
const val = e.detail.value
this.inputValue = val
this.$emit('input', val)
this.toMakeAndCheck(val)
},
toMakeAndCheck(val) {
const arr = val.split('')
this.codeIndex = arr.length + 1
this.codeArr = arr
if (this.codeIndex > Number(this.maxlength)) {
this.$emit('finish', this.codeArr.join(''))
}
},
// refs 时不再提供 v-model 支持
// 支持使用refs来设置value
// 没有提供数据保护与检测，自己在外面对数据进行检测保护
set(val) {
this.inputValue = val
this.toMakeAndCheck(val)
},
// 支持使用refs来清空
clear() {
this.inputValue = ''
this.codeArr = []
this.codeIndex = 1
}
}
}
</script>
<style scoped>
@keyframes twinkling {
0% {
opacity: 0.2;
}
50% {
opacity: 0.5;
}
100% {
opacity: 0.2;
}
}
.code-box {
text-align: center;
}
.flex-box {
display: flex;
justify-content: center;
flex-wrap: wrap;
position: relative;
}
.flex-box .hide-input {
position: absolute;
top: 0;
left: -100%;
width: 200%;
height: 100%;
text-align: left;
z-index: 9;
opacity: 0;
}
.flex-box .item {
position: relative;
width: 80upx;
height: 80upx;
margin-right: 10upx;
font-size: 52upx;
font-weight: bold;
color: #333333;
line-height: 80upx;
}
.flex-box .item:last-child {
margin-right: 0;
}
.flex-box .middle {
border: none;
}
.flex-box .box {
box-sizing: border-box;
border: 2upx solid #cccccc;
border-radius: 6rpx;
}
.flex-box .bottom {
box-sizing: border-box;
border-bottom: 8rpx solid #212121;
}
.flex-box .active {
border-color: #00C777;
}
.flex-box .active .line {
display: block;
}
.flex-box .line {
display: none;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 2upx;
height: 40upx;
background: #333333;
animation: twinkling 1s infinite ease;
}
.flex-box .dot {
font-size: 80upx;
line-height: 40upx;
}
.flex-box .bottom-line {
height: 4px;
background: #000000;
width: 80%;
position: absolute;
border-radius: 2px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment