yangjun
/
dbsd_kczx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

任教课程-学生端-手机端适配：各功能界面样式调整

This commit is contained in:
1378012178@qq.com 2024-12-19 15:00:46 +08:00
parent 398b64316f
commit f6d813dff4
9 changed files with 196 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -382,4 +382,5 @@ Online表单&Online报表&代码生成
## 判断是否小尺寸屏幕
import { useScreenSize } from '/src/utils/screenSize/useScreenSize'
const { isSmallScreen } = useScreenSize();

25
src/views/kc/wjxCswj/WjxCswjStuList.vue
View File

@ -35,6 +35,9 @@
<a-card style="height: 130px;border: 1px solid #eef1f2; border-radius:5px; margin:3px 5px">
<div class="rotate" :style="classFun(item.flag)">{{getStatus(item.flag)}}</div>
<a-row style="top: -48px;position: relative;">
<a-col :lg="{span:0}" :span="4" :push="20">
<div class="wczt-sm" :style="classFun_sm(item.flag)">{{ getStatus(item.flag) }}</div>
</a-col>
<a-col :span="24" style="margin-bottom: 10px;height:53px;overflow:hidden;">
<div style="font-size: 18px;font-weight: bold;">{{item.title}}</div>
</a-col>
@ -191,6 +194,17 @@
return 'background: linear-gradient(180deg, #fb8c7f, #f56670)';
}
}
function classFun_sm(type) {
if (type == '-1') {
return 'color: rgb(215, 72, 82);'; // 深红色
} else if (type == '0') {
return 'color: rgb(225, 95, 10);'; // 深橙色
} else if (type == '1') {
return 'color: rgb(5, 136, 182);'; // 深天蓝色
}
}
function getStatus(flag){
if(flag == '-1'){
return "待提交";
@ -204,6 +218,17 @@
</script>
<style lang="less" scoped>
.wczt-sm {
border-radius: 3px;
color: rgb(0, 0, 0); /* 设置文字颜色为白色 */
font-weight: bold;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100%; /* 确保容器有高度，否则垂直居中可能不会按预期工作 */
text-align: center; /* 如果有多行文本，保证它们也居中 */
}
.jeecg-basic-table-form-container {
padding: 0;
width: 99%;

75
src/views/kc/wjxWjxx/components/WjxWjxxTmlbDjForm.vue
View File

@ -8,7 +8,7 @@
<!-- 题干信息 -->
<div style="width:100%;" v-for="(item,index) in tiganData" :key="index">
<!-- 单选题 -->
<div style="width: 100%;" v-if="item.wjType==3">
<div style="width: 100%;" v-if="item.wjType == '3' && item.wjSubtype == null">
<div style="text-align: left;width: 100%;font-weight: bold;font-size: 18px;padding: 20px;">单选题</div>
<a-card >
<template #title>
@ -26,6 +26,25 @@
</a-radio-group>
</a-card>
</div>
<!-- 判断题 -->
<div style="width: 100%;" v-else-if="item.wjType == '3' && item.wjSubtype == 305">
<div style="text-align: left;width: 100%;font-weight: bold;font-size: 18px;padding: 20px;">判断题</div>
<a-card >
<template #title>
<span>{{index+1}}、</span><span v-html="item.wjTitle" style="white-space:pre-wrap;word-wrap : break-word"></span>
</template>
<template #extra>
<span style="margin-left: 40px;" v-if="isShow">题目分值： {{item.wjScore}} 分</span>
</template>
<a-radio-group v-model:value="item.itemSelected" style="width: 100%" size="default" :disabled="disabled">
<div style="width: 100%" v-for="(tmxx,index) in item.wjxWjxxTmxxList" :key="index">
<a-radio :value="tmxx.itemIndex+``" style="width: 100%;margin-bottom: 5px;">
<span v-html:value="tmxx.itemTitle" style="width:80%;font-size: 16px;"></span>
</a-radio>
</div>
</a-radio-group>
</a-card>
</div>
<!-- 多选题 -->
<div style="width: 100%;" v-else-if="item.wjType==4">
<div style="text-align: left;width: 100%;font-weight: bold;font-size: 18px;padding: 20px;">多选题</div>
@ -47,8 +66,8 @@
</a-checkbox-group>
</a-card>
</div>
<!-- 多选题 -->
<div style="width: 100%;" v-else-if="item.wjType==5">
<!-- 填空题 -->
<div style="width: 100%;" v-else-if="item.wjType == '5' && item.wjSubtype==null">
<div style="text-align: left;width: 100%;font-weight: bold;font-size: 18px;padding: 20px;">填空题</div>
<a-card >
<template #title>
@ -64,7 +83,51 @@
</a-row>
</a-card>
</div>
<!-- 简答题 -->
<div style="width: 100%;" v-else-if="item.wjType == '5' && item.wjSubtype==5">
<div style="text-align: left;width: 100%;font-weight: bold;font-size: 18px;padding: 20px;">简答题</div>
<a-card >
<template #title>
<span>{{index+1}}、</span><span v-html="item.wjTitle" style="white-space:pre-wrap;word-wrap : break-word"/>
</template>
<template #extra>
<span style="margin-left: 40px;" v-if="isShow">题目分值： {{item.wjScore}} 分</span>
</template>
<a-row>
<a-col :span="24">
<a-textarea placeholder="请填写答案" v-model:value="item.wjAnswer" style="width:100%;" :auto-size="{ minRows: 2, maxRows: 5 }" :disabled="disabled"/>
</a-col>
</a-row>
</a-card>
</div>
<!-- 文件题 -->
<div style="width: 100%" v-else-if="item.wjType == 8">
<div style="text-align: left;width: 100%;font-weight: bold;font-size: 18px;padding: 20px;">文件题</div>
<a-card>
<template #title>
<div style="white-space: pre-wrap; word-wrap: break-word"><span>{{ index + 1 }}、</span><span v-html="item.wjTitle" style="white-space: pre-wrap; word-wrap: break-word"></span></div>
<div v-if="item.picPath">
<j-upload v-model:value="item.picPath" fileType="image" disabled :maxCount="item.picPath.split(',').length" :buttonVisible="true" ></j-upload>
</div>
</template>
<template #extra>
<span style="margin-left: 40px;" v-if="isShow">题目分值： {{item.wjScore}} 分</span>
</template>
<a-row>
<a-col :span="24">
<!-- -{{item.picPath.split(',')}}- -->
<!-- <JImageUpload v-model:value="item.picPath" disabled></JImageUpload> -->
<!-- <j-image-upload v-model:value="item.picPath" :disabled="disabled"></j-image-upload> -->
</a-col>
<a-col :span="24">
<j-upload v-model:value="item.wjAnswer" :max-count="1" :disabled="disabled" accept=".doc,.docx,.pdf,.jpg,.jpeg,.png,.mp3,.mp4,.zip,.ppt,.pptx,.rar,.excel" ></j-upload>
</a-col>
</a-row>
</a-card>
</div>
<div v-else>
{{ tocon(item) }}
无对应类型
</div>
</div>
@ -78,6 +141,7 @@ import { ref, nextTick, defineExpose } from 'vue';
import { Icon } from '/@/components/Icon';
import { useMessage } from '/@/hooks/web/useMessage';
import { defHttp } from '/@/utils/http/axios';
import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
import {
queryWjxWjxxTmxxListByMainId,
queryDataById,
@ -93,7 +157,10 @@ const tiganData = ref<any>([]);
const tmxxPar = ref<any>({});
// const openTime = ref<string>('');
const { createMessage } = useMessage();
function tocon(item){
console.log("🚀 ~ tocon ~ item:", item)
}
const emit = defineEmits(['ok', 'closeLoading']);
//初始化

20
src/views/kc/wjxWjxx/components/WjxWjxxTmlbDjV2Form.vue
View File

@ -8,11 +8,11 @@
<a-layout-content>
<a-spin :spinning="confirmLoading" v-if="showType == 1">
<a-row style="min-height: calc(80vh); background: #fcfcfc">
<a-col :span="24" style="overflow-y: scroll">
<a-col :span="24" style="overflow-y: scroll;width: 100%; word-wrap: break-word; white-space: normal;">
<div style="text-align: center; width: 100%; font-weight: bold; font-size: 20px;margin-top: 50px;margin-bottom: 40px;"> {{ title }}</div>
<div style="text-align: center; width: 100%; font-weight: bold; font-size: 20px;color:red;" v-if="sfsxs"> 您不是此测验的学生，不能进行提交</div>
<div style=" width: 100%;margin-left: 30px;" v-html="content"></div>
<div class="con-class" v-html="content"></div>
<!-- 题干信息 -->
<div style="width: 100%; padding: 0 10px; margin: 0 auto" v-for="(item, index) in tiganData" :key="index">
<!-- 单选题 -->
@ -382,6 +382,22 @@ defineExpose({
</script>
<style lang="less" scoped>
@media (max-width: 768px) {
.con-class {
width: 90%;
margin-left: 30px;
}
}
@media (min-width: 769px) {
.con-class {
width: 95%;
margin-left: 30px;
}
}
/deep/span.ant-radio + * {
width: 100%;
}

7
src/views/site/studentWdkc/studentMain.vue
View File

@ -8,8 +8,7 @@
<a-row>
<a-col :lg="24" :xs="18">
<div style="width:100%;background: #fff;font-size: 18px;font-weight: bold;margin-top:10px;padding: 10px;">
<a-button type="primary" @click="toggleCollapsed">
<a-button v-if="!isSmallScreen" type="primary" @click="toggleCollapsed">
<MenuUnfoldOutlined v-if="collapsed" />
<MenuUnfoldOutlined v-else />
</a-button>
@ -52,7 +51,9 @@
import headerPage from '/@/views/site/common/header.vue';
import footerPage from '/@/views/site/common/footer.vue';
import studentMenu from '/@/views/site/studentWdkc/studentMenu.vue';
import { useScreenSize } from '/src/utils/screenSize/useScreenSize'
const { isSmallScreen } = useScreenSize();
const maxClassName = ref<any>({});
const selectedKeys = ref<string[]>([]);
const kcxxInfo = ref<string>('');

14
src/views/zy/zyGonggao/StudentGonggaoList.vue
View File

@ -4,7 +4,7 @@
<div class="jeecg-basic-table-form-container">
<a-form @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-row :gutter="24" style="margin-top: 10px;">
<a-col :lg="8">
<a-col :lg="8" class="bt-col">
<a-form-item label="标题">
<j-input placeholder="请输入标题" v-model:value="queryParam.title"></j-input>
</a-form-item>
@ -54,7 +54,9 @@
import { JInput } from '/@/components/Form';
import { useRouter } from 'vue-router';
import { Input, Popover, Pagination, Empty } from 'ant-design-vue';
import { useScreenSize } from '/src/utils/screenSize/useScreenSize'
const { isSmallScreen } = useScreenSize();
const { createConfirm } = useMessage();
const APagination = Pagination;
@ -136,6 +138,16 @@
</script>
<style lang="less" scoped>
@media (max-width: 768px) {
.bt-col{
padding-left: 20px !important;
}
}
@media (min-width: 769px) {
}
.jeecg-basic-table-form-container {
padding: 0;
width:99%;

23
src/views/zy/zyInfo/StudentZyInfoList.vue
View File

@ -10,6 +10,9 @@
<a-card style="min-height: 200px; border: 1px solid #eeeeee">
<div class="rotate" :style="classFun(item)">{{ callText(item) }}</div>
<a-row style="margin-top: -40px;">
<a-col :lg="{span:0}" :span="4" :push="20">
<div class="wczt-sm" :style="classFun_sm(item)">{{ callText(item) }}</div>
</a-col>
<a-col :span="24" class="zytitle" :title="item.title" @click="handleDetail(item)"
><span class="zytitle-back ellipsis">{{ item.title }}</span></a-col
>
@ -296,6 +299,17 @@ function classFun(record) {
return 'background: linear-gradient(180deg, #61c4e3, #23a6d4)';
}
}
function classFun_sm(record) {
if (record.stuscore) {
return 'background: linear-gradient(to top, rgb(245, 102, 112), rgb(251, 140, 127));'; // #f56670 和 #fb8c7f
} else if (record.stuFilePath) {
return 'background: linear-gradient(to top, rgb(255, 125, 40), rgb(254, 163, 23));'; // #ff7d28 和 #fea317
} else {
return 'background: linear-gradient(to top, rgb(35, 166, 212), rgb(97, 196, 227));'; // #23a6d4 和 #61c4e3
}
}
function callText(record) {
if (record.stuscore) {
return '已完成';
@ -417,6 +431,15 @@ onMounted(() => {
</script>
<style lang="less" scoped>
.wczt-sm {
border-radius: 3px;
color: white; /* 设置文字颜色为白色 */
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100%; /* 确保容器有高度，否则垂直居中可能不会按预期工作 */
text-align: center; /* 如果有多行文本，保证它们也居中 */
}
.jeecg-basic-table-form-container {
padding: 0;
width: 99%;

24
src/views/zy/zyInfo/StudentZyInfoQmksList.vue
View File

@ -10,6 +10,9 @@
<a-card style="min-height: 240px; border: 1px solid #eeeeee">
<div class="rotate" :style="classFun(item)">{{ callText(item) }}</div>
<a-row style="top: -60px; position: relative">
<a-col :lg="{span:0}" :span="4" :push="20" style="margin-top: 20px;">
<div class="wczt-sm" :style="classFun_sm(item)">{{ callText(item) }}</div>
</a-col>
<a-col :span="24" class="zytitle" :title="item.title" @click="handleDetail(item)"
><span class="zytitle-back ellipsis">{{ item.title }}</span></a-col
>
@ -296,6 +299,17 @@ function classFun(record) {
return 'background: linear-gradient(180deg, #61c4e3, #23a6d4)';
}
}
function classFun_sm(record) {
if (record.stuscore) {
return 'background: linear-gradient(to top, rgb(245, 102, 112), rgb(251, 140, 127));'; // #f56670 和 #fb8c7f
} else if (record.stuFilePath) {
return 'background: linear-gradient(to top, rgb(255, 125, 40), rgb(254, 163, 23));'; // #ff7d28 和 #fea317
} else {
return 'background: linear-gradient(to top, rgb(35, 166, 212), rgb(97, 196, 227));'; // #23a6d4 和 #61c4e3
}
}
function callText(record) {
console.log('record--->',record);
if (record.stuscore) {
@ -418,6 +432,16 @@ onMounted(() => {
</script>
<style lang="less" scoped>
.wczt-sm {
border-radius: 3px;
color: white; /* 设置文字颜色为白色 */
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100%; /* 确保容器有高度，否则垂直居中可能不会按预期工作 */
text-align: center; /* 如果有多行文本，保证它们也居中 */
}
.jeecg-basic-table-form-container {
padding: 0;
width: 99%;

23
src/views/zy/zyInfo/components/ZyInfoDetailForm.vue
View File

@ -426,12 +426,23 @@ defineExpose({
.spanb-word {
color: #999999;
}
.wrapper-back {
background: #fff;
border-radius: 10px;
margin-top: 10px;
padding-top: 15px;
width: 100%;
@media (max-width: 768px) {
.wrapper-back {
background: #fff;
border-radius: 10px;
margin-top: 10px;
padding: 15px;
width: 100%;
}
}
@media (min-width: 769px) {
.wrapper-back {
background: #fff;
border-radius: 10px;
margin-top: 10px;
padding-top: 15px;
width: 100%;
}
}
.wrapper-title {
font-size: 18px;