Compare commits
3 Commits
cc0d8a2f70
...
7ffab64a82
| Author | SHA1 | Date | |
|---|---|---|---|
| 7ffab64a82 | |||
| 5a70129c70 | |||
| 45c59a2d36 |
@@ -1,7 +1,93 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-box">
|
<div class="app-box">
|
||||||
<image src="../../../static/images/train/bj.jpg" class="bjImg" mode=""></image>
|
<image src="../../../static/images/train/bj.jpg" class="bjImg" mode=""></image>
|
||||||
<div>专项练习</div>
|
<div class="con-box">
|
||||||
|
<div class="header">
|
||||||
|
<div>正确率：0%</div>
|
||||||
|
<div>用时：00:00</div>
|
||||||
|
<div class="headBtn">暂停</div>
|
||||||
|
</div>
|
||||||
|
<div class="problemCard">
|
||||||
|
<div v-for="(item,index) in problemData" :key="index">
|
||||||
|
<template v-if="questionIndex==(index+1)">
|
||||||
|
<div class="problemTitle">
|
||||||
|
<span class="titleType" v-if="item.type=='single'">单选题</span>
|
||||||
|
<span class="titleType" v-if="item.type=='multiple'">多选题</span>
|
||||||
|
<span class="titleType" v-if="item.type=='judge'">判断题</span>
|
||||||
|
<span>{{item.content}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="options" v-if="item.type=='single'">
|
||||||
|
<div class="opt" @click="selected(i)" :class="radio!==''&&i==radio?'active':''" v-for="(val,i) in parseOptions(item.trainChooses)">
|
||||||
|
<div class="optLab">{{indexToLetter(i)}}</div>
|
||||||
|
<span>{{val}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="options" v-if="item.type=='multiple'">
|
||||||
|
<div class="opt" @click="selected2(i)" :class="judgment(i)?'active':''" v-for="(val,i) in parseOptions(item.trainChooses)">
|
||||||
|
<div class="optLab">{{indexToLetter(i)}}</div>
|
||||||
|
<span>{{val}}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="options" v-if="item.type=='judge'">
|
||||||
|
<div class="opt" @click="selected3('正确')" :class="radio2=='正确'?'active':''">
|
||||||
|
<span>正确</span>
|
||||||
|
</div>
|
||||||
|
<div class="opt" @click="selected3('错误')" :class="radio2=='错误'?'active':''">
|
||||||
|
<span>错误</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="analysis">
|
||||||
|
<div class="analysisHead correct">
|
||||||
|
<div>回答正确！</div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="analysisHead errors" v-if="judgWhether=='错误'">
|
||||||
|
<div>回答错误！</div>
|
||||||
|
<div></div>
|
||||||
|
</div> -->
|
||||||
|
<div class="analysisCon">
|
||||||
|
<div class="parse1">正确答案：</div>
|
||||||
|
<div class="parse2" v-if="item.type=='single'" style="color: #30A0FF;font-weight: bold;">{{String.fromCharCode(65 + Number(item.answer))}}.</div>
|
||||||
|
<div class="parse2" v-if="item.type=='multiple'" style="color: #30A0FF;font-weight: bold;">
|
||||||
|
<span v-for="(val,i) in parseOptions(item.answer)">{{indexToLetter(val-1)}}.</span>
|
||||||
|
</div>
|
||||||
|
<div class="parse2" v-if="item.type=='judge'" style="color: #30A0FF;font-weight: bold;">{{item.answer}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="analysisCon">
|
||||||
|
<div class="parse1">答案解析：</div>
|
||||||
|
<div class="parse2">{{item.answerDesc}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="analysisCon">
|
||||||
|
<div class="parse1">知识点：</div>
|
||||||
|
<div>
|
||||||
|
<el-tag style="margin-right: 10px;">{{item.knowledgePoint}}</el-tag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="problemBtns">
|
||||||
|
<div class="events">提交答案</div>
|
||||||
|
<div>下一题</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<div class="footerLeft">
|
||||||
|
<div class="zuo events"></div>
|
||||||
|
<div class="you"></div>
|
||||||
|
<div style="text-align: center;font-size: 24rpx;">
|
||||||
|
<div>⭐</div>
|
||||||
|
<div>收藏</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div></div>
|
||||||
|
<div class="footer">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -13,9 +99,79 @@ const { $api, navTo, vacanciesTo, formatTotal, config } = inject('globalFunction
|
|||||||
import useUserStore from '@/stores/useUserStore';
|
import useUserStore from '@/stores/useUserStore';
|
||||||
import useDictStore from '@/stores/useDictStore';
|
import useDictStore from '@/stores/useDictStore';
|
||||||
|
|
||||||
function jumps(url){
|
const radio = ref('');
|
||||||
navTo(url);
|
const radio2 = ref('');
|
||||||
}
|
const checkList = ref([]);
|
||||||
|
const questionIndex = ref(1);
|
||||||
|
const correctIndex = ref(0);
|
||||||
|
const errorsIndex = ref(0);
|
||||||
|
const accuracyRate = ref(0);
|
||||||
|
const problemData = reactive([
|
||||||
|
{
|
||||||
|
type:'single',
|
||||||
|
content:"君不见黄河之水天上来，下一句是？",
|
||||||
|
fraction:5,
|
||||||
|
trainChooses:"奔流到海不复回,朝如青丝暮成雪,人生得意须尽欢,莫使金樽空对月",
|
||||||
|
},{
|
||||||
|
type:'multiple',
|
||||||
|
content:"以下哪些是欧姆定律的适用条件？",
|
||||||
|
fraction:8,
|
||||||
|
trainChooses:"线性电阻,恒定温度,金属导体,半导体材料",
|
||||||
|
|
||||||
|
},{
|
||||||
|
type:'judge',
|
||||||
|
content:"功率越大的电器，其电阻值越小",
|
||||||
|
fraction:2,
|
||||||
|
trainChooses:[
|
||||||
|
"正确",
|
||||||
|
"错误",
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
function selected(i){
|
||||||
|
radio.value=i
|
||||||
|
};
|
||||||
|
//多选
|
||||||
|
function selected2(i){
|
||||||
|
let arr=checkList.value.join(",")
|
||||||
|
if(arr.indexOf(i) !== -1){
|
||||||
|
const index = checkList.value.indexOf(i);
|
||||||
|
if (index !== -1) {
|
||||||
|
checkList.value.splice(index, 1);
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
checkList.value.push(i)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
function judgment(i){
|
||||||
|
let arr=checkList.value.join(",")
|
||||||
|
if(arr.indexOf(i) !== -1){
|
||||||
|
return true
|
||||||
|
}else{
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
};
|
||||||
|
function selected3(i){
|
||||||
|
radio2.value=i
|
||||||
|
};
|
||||||
|
// 解析选项
|
||||||
|
function parseOptions(options) {
|
||||||
|
if (!options) return [];
|
||||||
|
// 假设options是字符串格式，以分号分隔
|
||||||
|
if (typeof options === 'string') {
|
||||||
|
return options.split(',').filter(opt => opt.trim());
|
||||||
|
}
|
||||||
|
// 如果是数组，直接返回
|
||||||
|
if (Array.isArray(options)) {
|
||||||
|
return options;
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
};
|
||||||
|
function indexToLetter(index) {
|
||||||
|
// 将索引转换为对应的字母
|
||||||
|
return String.fromCharCode(65 + index);
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@@ -28,5 +184,178 @@ function jumps(url){
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
.con-box{
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top:0;
|
||||||
|
z-index: 10;
|
||||||
|
padding: 20rpx 28rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.header{
|
||||||
|
height: 100rpx;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: linear-gradient(0deg, #4285EC 0%, #0BBAFB 100%);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 26rpx;
|
||||||
|
border-radius: 10rpx
|
||||||
|
.headBtn{
|
||||||
|
background: #499FFF;
|
||||||
|
border-radius: 4px;
|
||||||
|
width: 100rpx;
|
||||||
|
text-align: center;
|
||||||
|
height: 50rpx;
|
||||||
|
line-height: 50rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.problemCard{
|
||||||
|
margin-top: 30rpx;
|
||||||
|
.problemTitle{
|
||||||
|
font-size: 30rpx;
|
||||||
|
.titleType{
|
||||||
|
display: inline-block;
|
||||||
|
background-color: #499FFF;
|
||||||
|
border-radius: 10rpx 10rpx 10rpx 0;
|
||||||
|
padding: 8rpx 12rpx;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 26rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.options{
|
||||||
|
margin-top: 30rpx;
|
||||||
|
.opt{
|
||||||
|
height: 60rpx;
|
||||||
|
/* background-color: #F8F9FA; */
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #808080;
|
||||||
|
font-size: 30rpx;
|
||||||
|
.optLab{
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 40rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #8C8C8C;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 32rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.active{
|
||||||
|
background: linear-gradient(90deg, #25A9F5 0%, #B1DBFF 100%);
|
||||||
|
color: #fff!important;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.active>view{
|
||||||
|
background-color: #fff!important;
|
||||||
|
color: #25A9F5!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.analysis{
|
||||||
|
margin-top: 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 6px;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
border: 1px solid #10A8FF;
|
||||||
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.analysisHead{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-family: Microsoft YaHei;
|
||||||
|
font-weight: bold;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
.correct{
|
||||||
|
color: #67C23A;
|
||||||
|
}
|
||||||
|
.errors{
|
||||||
|
color: #F06A6A;
|
||||||
|
}
|
||||||
|
.analysisCon{
|
||||||
|
margin-top: 30rpx;
|
||||||
|
.parse1{
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-family: Microsoft YaHei;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.parse2{
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.problemBtns{
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
justify-content: center
|
||||||
|
view{
|
||||||
|
width: 140rpx
|
||||||
|
height: 50rpx
|
||||||
|
text-align: center
|
||||||
|
line-height: 50rpx
|
||||||
|
background-color: #10A8FF
|
||||||
|
color: #fff
|
||||||
|
font-size: 28rpx
|
||||||
|
border-radius: 5rpx
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footer{
|
||||||
|
width: 100%;
|
||||||
|
height: 120rpx;
|
||||||
|
border-top: 1px solid #ddd
|
||||||
|
position: fixed
|
||||||
|
bottom: 0
|
||||||
|
left: 0
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
justify-content: space-between
|
||||||
|
.footerLeft{
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
font-size: 30rpx;
|
||||||
|
.zuo{
|
||||||
|
width: 24rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
border-top: 2px solid #666
|
||||||
|
border-left: 2px solid #666
|
||||||
|
transform: rotate(-45deg); /* 鼠标悬停时旋转360度 */
|
||||||
|
margin-left: 50rpx;
|
||||||
|
}
|
||||||
|
.you{
|
||||||
|
width: 24rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
border-right: 2px solid #666
|
||||||
|
border-bottom: 2px solid #666
|
||||||
|
transform: rotate(-45deg); /* 鼠标悬停时旋转360度 */
|
||||||
|
margin-left: 30rpx;
|
||||||
|
margin-right: 50rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.events{
|
||||||
|
pointer-events: none; /* 这会禁用所有指针事件 */
|
||||||
|
opacity: 0.5; /* 可选：改变透明度以视觉上表示不可点击 */
|
||||||
|
cursor: not-allowed; /* 可选：改变鼠标光标样式 */
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,316 +0,0 @@
|
|||||||
<template>
|
|
||||||
<AppLayout :title="title" :show-bg-image="false" @onScrollBottom="getDataList('add')">
|
|
||||||
<!-- <template #headerleft>
|
|
||||||
<view class="btnback">
|
|
||||||
<image src="@/static/icon/back.png" @click="navBack"></image>
|
|
||||||
</view>
|
|
||||||
</template> -->
|
|
||||||
<template #headContent>
|
|
||||||
<view class="collection-search">
|
|
||||||
<view class="search-content">
|
|
||||||
<view class="header-input button-click">
|
|
||||||
<uni-icons class="iconsearch" color="#6A6A6A" type="search" size="22"></uni-icons>
|
|
||||||
<input
|
|
||||||
class="input"
|
|
||||||
v-model="searchKeyword"
|
|
||||||
@confirm="searchVideo"
|
|
||||||
placeholder="输入视频名称"
|
|
||||||
placeholder-class="inputplace"
|
|
||||||
/>
|
|
||||||
<uni-icons
|
|
||||||
v-if="searchKeyword"
|
|
||||||
class="clear-icon"
|
|
||||||
type="clear"
|
|
||||||
size="24"
|
|
||||||
color="#999"
|
|
||||||
@click="clearSearch"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
<view class="main-list">
|
|
||||||
<view class="list-title">
|
|
||||||
<text>视频列表</text>
|
|
||||||
<view class="title-line"></view>
|
|
||||||
</view>
|
|
||||||
<view class="video-grid" v-if="pageState.list.length">
|
|
||||||
<view
|
|
||||||
v-for="video in pageState.list"
|
|
||||||
:key="video.id || video.videoId"
|
|
||||||
class="video-item"
|
|
||||||
:style="getItemBackgroundStyle('video-bg.png')"
|
|
||||||
@click="playVideo(video)"
|
|
||||||
>
|
|
||||||
<view class="video-cover">
|
|
||||||
<image
|
|
||||||
:src="video.coverImage || video.videoCover || '/static/icon/video.png'"
|
|
||||||
mode="aspectFill"
|
|
||||||
></image>
|
|
||||||
</view>
|
|
||||||
<view class="video-info">
|
|
||||||
{{ video.title || video.videoName || '未命名视频' }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<empty v-else pdTop="200"></empty>
|
|
||||||
</view>
|
|
||||||
</AppLayout>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { inject, ref, reactive } from 'vue';
|
|
||||||
import { onLoad } from '@dcloudio/uni-app';
|
|
||||||
const { $api, navTo, navBack } = inject('globalFunction');
|
|
||||||
|
|
||||||
// state
|
|
||||||
const title = ref('');
|
|
||||||
const searchKeyword = ref('');
|
|
||||||
const pageState = reactive({
|
|
||||||
page: 0,
|
|
||||||
list: [],
|
|
||||||
total: 0,
|
|
||||||
maxPage: 1,
|
|
||||||
pageSize: 12,
|
|
||||||
search: {},
|
|
||||||
});
|
|
||||||
const baseUrl = 'http://10.110.145.145/images/train/';
|
|
||||||
const getItemBackgroundStyle = (imageName) => ({
|
|
||||||
backgroundImage: `url(${baseUrl + imageName})`,
|
|
||||||
backgroundSize: 'cover', // 覆盖整个容器
|
|
||||||
backgroundPosition: 'center', // 居中
|
|
||||||
backgroundRepeat: 'no-repeat'
|
|
||||||
});
|
|
||||||
// 模拟视频数据
|
|
||||||
const mockVideoData = [
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
title: '职业技能培训基础课程',
|
|
||||||
coverImage: '/static/icon/server1.png',
|
|
||||||
videoUrl: ''
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '2',
|
|
||||||
title: '面试技巧分享',
|
|
||||||
coverImage: '/static/icon/server2.png',
|
|
||||||
videoUrl: ''
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '3',
|
|
||||||
title: '简历制作指南',
|
|
||||||
coverImage: '/static/icon/server3.png',
|
|
||||||
videoUrl: ''
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '4',
|
|
||||||
title: '职场沟通技巧',
|
|
||||||
coverImage: '/static/icon/server4.png',
|
|
||||||
videoUrl: ''
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '5',
|
|
||||||
title: '职业规划讲座',
|
|
||||||
coverImage: '/static/icon/flame.png',
|
|
||||||
videoUrl: ''
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '6',
|
|
||||||
title: '行业趋势分析',
|
|
||||||
coverImage: '/static/icon/flame2.png',
|
|
||||||
videoUrl: ''
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
onLoad(() => {
|
|
||||||
getDataList('refresh');
|
|
||||||
});
|
|
||||||
|
|
||||||
// 搜索视频
|
|
||||||
function searchVideo() {
|
|
||||||
getDataList('refresh');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清除搜索内容
|
|
||||||
function clearSearch() {
|
|
||||||
searchKeyword.value = '';
|
|
||||||
getDataList('refresh');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取视频列表
|
|
||||||
function getDataList(type = 'add') {
|
|
||||||
if (type === 'refresh') {
|
|
||||||
pageState.page = 1;
|
|
||||||
pageState.maxPage = 1;
|
|
||||||
}
|
|
||||||
if (type === 'add' && pageState.page < pageState.maxPage) {
|
|
||||||
pageState.page += 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 模拟API请求延迟
|
|
||||||
setTimeout(() => {
|
|
||||||
// 在实际项目中，这里应该调用真实的API接口
|
|
||||||
// 目前使用模拟数据
|
|
||||||
let filteredList = [...mockVideoData];
|
|
||||||
|
|
||||||
// 如果有搜索关键词，进行过滤
|
|
||||||
if (searchKeyword.value.trim()) {
|
|
||||||
filteredList = filteredList.filter(video =>
|
|
||||||
video.title.toLowerCase().includes(searchKeyword.value.toLowerCase())
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const start = 0;
|
|
||||||
const end = pageState.pageSize;
|
|
||||||
const pageData = filteredList.slice(start, end);
|
|
||||||
|
|
||||||
if (type === 'add') {
|
|
||||||
pageState.list = [...pageState.list, ...pageData];
|
|
||||||
} else {
|
|
||||||
pageState.list = pageData;
|
|
||||||
}
|
|
||||||
|
|
||||||
pageState.total = filteredList.length;
|
|
||||||
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
|
||||||
}, 300);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 播放视频
|
|
||||||
function playVideo(video) {
|
|
||||||
// 在实际项目中，这里应该导航到视频播放页面
|
|
||||||
// 或者调用视频播放组件
|
|
||||||
console.log('播放视频:', video.title);
|
|
||||||
// 示例：navTo(`/pages/videoPlayer/videoPlayer?id=${video.id}`);
|
|
||||||
$api.msg(`准备播放: ${video.title}`);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
.btnback{
|
|
||||||
width: 64rpx;
|
|
||||||
height: 64rpx;
|
|
||||||
}
|
|
||||||
.btn {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
width: 52rpx;
|
|
||||||
height: 52rpx;
|
|
||||||
}
|
|
||||||
image {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.collection-search{
|
|
||||||
padding: 10rpx 20rpx;
|
|
||||||
.search-content{
|
|
||||||
position: relative
|
|
||||||
display: flex
|
|
||||||
align-items: center
|
|
||||||
padding: 14rpx 0
|
|
||||||
.header-input{
|
|
||||||
padding: 0
|
|
||||||
width: calc(100%);
|
|
||||||
position: relative
|
|
||||||
.iconsearch{
|
|
||||||
position: absolute
|
|
||||||
left: 30rpx;
|
|
||||||
top: 50%
|
|
||||||
transform: translate(0, -50%)
|
|
||||||
z-index: 1
|
|
||||||
}
|
|
||||||
.input{
|
|
||||||
padding: 0 80rpx 0 80rpx
|
|
||||||
height: 80rpx;
|
|
||||||
background: #FFFFFF;
|
|
||||||
border-radius: 75rpx 75rpx 75rpx 75rpx;
|
|
||||||
border: 2rpx solid #ECECEC
|
|
||||||
font-size: 28rpx;
|
|
||||||
}
|
|
||||||
.clear-icon{
|
|
||||||
position: absolute
|
|
||||||
right: 30rpx;
|
|
||||||
top: 50%
|
|
||||||
transform: translate(0, -50%)
|
|
||||||
z-index: 1
|
|
||||||
cursor: pointer
|
|
||||||
}
|
|
||||||
.inputplace{
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #B5B5B5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.main-list{
|
|
||||||
background-color: #ffffff;
|
|
||||||
padding: 20rpx 20rpx 28rpx 20rpx;
|
|
||||||
margin:10rpx 30rpx ;
|
|
||||||
box-shadow: 0px 3px 20px 0px rgba(0,105,234,0.1);
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
.list-title{
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 36rpx;
|
|
||||||
color: #404040;
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.title-line{
|
|
||||||
position: absolute;
|
|
||||||
bottom: -10rpx;
|
|
||||||
left: 36rpx;
|
|
||||||
width: 70rpx;
|
|
||||||
height: 8rpx;
|
|
||||||
background: linear-gradient(90deg, #FFAD58 0%, #FF7A5B 100%);
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
.video-grid{
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 20rpx;
|
|
||||||
}
|
|
||||||
.video-item{
|
|
||||||
border-radius: 12rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
||||||
transition: transform 0.2s;
|
|
||||||
padding: 20rpx
|
|
||||||
}
|
|
||||||
.video-item:active{
|
|
||||||
transform: scale(0.98);
|
|
||||||
}
|
|
||||||
.video-cover{
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
padding-top: 56.25%; /* 16:9 比例 */
|
|
||||||
background: #f0f0f0;
|
|
||||||
border-radius: 4rpx;
|
|
||||||
}
|
|
||||||
.video-cover image{
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.video-info{
|
|
||||||
padding: 16rpx 16rpx 0 16rpx;
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #333;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.video-title{
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #333;
|
|
||||||
line-height: 40rpx;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
BIN
unpackage/.DS_Store
vendored
Normal file
BIN
unpackage/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
unpackage/dist/.DS_Store
vendored
Normal file
BIN
unpackage/dist/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
unpackage/dist/build/.DS_Store
vendored
Normal file
BIN
unpackage/dist/build/.DS_Store
vendored
Normal file
Binary file not shown.
8
unpackage/dist/cache/.vite/deps/_metadata.json
vendored
Normal file
8
unpackage/dist/cache/.vite/deps/_metadata.json
vendored
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"hash": "6baa819c",
|
||||||
|
"configHash": "7c25a4d3",
|
||||||
|
"lockfileHash": "e3b0c442",
|
||||||
|
"browserHash": "1418816b",
|
||||||
|
"optimized": {},
|
||||||
|
"chunks": {}
|
||||||
|
}
|
||||||
3
unpackage/dist/cache/.vite/deps/package.json
vendored
Normal file
3
unpackage/dist/cache/.vite/deps/package.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"type": "module"
|
||||||
|
}
|
||||||
29
unpackage/dist/dev/mp-weixin/project.config.json
vendored
Normal file
29
unpackage/dist/dev/mp-weixin/project.config.json
vendored
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"description": "项目配置文件。",
|
||||||
|
"packOptions": {
|
||||||
|
"ignore": [],
|
||||||
|
"include": []
|
||||||
|
},
|
||||||
|
"setting": {
|
||||||
|
"urlCheck": false,
|
||||||
|
"es6": true,
|
||||||
|
"postcss": true,
|
||||||
|
"minified": true,
|
||||||
|
"newFeature": true,
|
||||||
|
"bigPackageSizeSupport": true,
|
||||||
|
"babelSetting": {
|
||||||
|
"ignore": [],
|
||||||
|
"disablePlugins": [],
|
||||||
|
"outputPath": ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"compileType": "miniprogram",
|
||||||
|
"libVersion": "3.10.3",
|
||||||
|
"appid": "wx9d1cbc11c8c40ba7",
|
||||||
|
"projectname": "qingdao-employment-service",
|
||||||
|
"condition": {},
|
||||||
|
"editorSetting": {
|
||||||
|
"tabIndent": "insertSpaces",
|
||||||
|
"tabSize": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
8
unpackage/dist/dev/mp-weixin/project.private.config.json
vendored
Normal file
8
unpackage/dist/dev/mp-weixin/project.private.config.json
vendored
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
|
||||||
|
"projectname": "qingdao-employment-service",
|
||||||
|
"setting": {
|
||||||
|
"compileHotReLoad": true,
|
||||||
|
"autoAudits": false
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user