tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

通用图片预览组件调整

Browse Source
This commit is contained in:
yanghang
2025-06-24 08:27:08 +08:00
parent 68156eddce
commit 8b3261b204
17 changed files with 162 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/course/components/talkingItem.vue
+75 -18
View File
@@ -24,11 +24,18 @@
</view>
</view>
<view class="btns-cont">
<view class="replay-btn"></view>
<view class="play-btn"></view>
<view class="next-learn-btn">继续学</view>
<view class="replay-learn-btn">重新学</view>
<view class="next-btn">继续</view>
<view class="replay-btn">
<image class="icon" src="@/static/images/course/replay.png" style="width: 100%;height: 100%;"></image>
</view>
<view class="play-btn">
<image class="icon" v-if="false" src="@/static/images/course/play.png" style="width: 100%;height: 100%;"></image>
<image class="icon" src="@/static/images/course/pause.png" style="width: 100%;height: 100%;"></image>
</view>
<view class="next-learn-btn">继续学<image class="icon icon-iamge" src="@/static/images/course/goon.png" ></image></view>
<!-- <view class="replay-learn-btn">重新学<image class="icon icon-iamge" src="@/static/images/course/restart.png" ></image></view> -->
<view class="replay-study-btn"><image class="icon icon-iamge" src="@/static/images/course/restudy.png" ></image></view>
<view class="next-btn">继续
<image class="icon icon-iamge" src="@/static/images/course/goon.png" ></image></view>
</view>
</view>
</view>
@@ -50,7 +57,13 @@
</view>
</view>
<view class="btns-cont">
<view class="play-btn"></view>
<!-- <view class="replay-btn">
<image class="icon" src="@/static/images/course/replay.png" style="width: 100%;height: 100%;"></image>
</view> -->
<view class="play-btn">
<image class="icon" v-if="false" src="@/static/images/course/play.png" style="width: 100%;height: 100%;"></image>
<image class="icon" src="@/static/images/course/pause.png" style="width: 100%;height: 100%;"></image>
</view>
</view>
</view>
</view>
@@ -132,7 +145,6 @@
float: left;
width: 46rpx;
height: 46rpx;
background-color: #ccc;
overflow: hidden;
margin-right: 16rpx;
margin-top: 25rpx;
@@ -141,45 +153,83 @@
float: left;
width: 46rpx;
height: 46rpx;
background-color: #ccc;
overflow: hidden;
margin-right: 16rpx;
margin-top: 25rpx;
}
.next-learn-btn{
float: left;
padding: 0 20rpx;
padding: 0 60rpx 0 20rpx;
height: 62rpx;
line-height: 62rpx;
font-size: 32rpx;
font-size: 30rpx;
background-color: #06f;
color: #fff;
border-radius: 8rpx;
margin-top: 16rpx;
margin-right: 16rpx;
position: relative;
.icon-iamge{
width: 25rpx;
height: 25rpx;
position: absolute;
right: 20rpx;
top: 50%;
margin-top: -12rpx;
}
}
.replay-learn-btn{
float: left;
padding: 0 20rpx;
padding: 0 60rpx 0 20rpx;
height: 62rpx;
line-height: 62rpx;
font-size: 32rpx;
font-size: 30rpx;
color: #06f;
background-color: #eaf2ff;
border-radius: 8rpx;
margin-top: 16rpx;
margin-right: 16rpx;
position: relative;
.icon-iamge{
width: 25rpx;
height: 25rpx;
position: absolute;
right: 20rpx;
top: 50%;
margin-top: -12rpx;
}
}
.replay-study-btn{
width: 162rpx;
height: 62rpx;
border-radius: 8rpx;
float: right;
margin-top: 16rpx;
.icon-iamge{
width: 100%;
height: 100%;
margin:0;
}
}
.next-btn{
float: right;
padding: 0 20rpx;
padding: 0 60rpx 0 20rpx;
height: 62rpx;
line-height: 62rpx;
font-size: 32rpx;
font-size: 30rpx;
background-color: #06f;
color: #fff;
border-radius: 8rpx;
margin-top: 16rpx;
position: relative;
.icon-iamge{
width: 25rpx;
height: 25rpx;
position: absolute;
right: 20rpx;
top: 50%;
margin-top: -12rpx;
}
}
}
}
@@ -236,7 +286,6 @@
float: left;
width: 46rpx;
height: 46rpx;
background-color: #ccc;
overflow: hidden;
margin-right: 16rpx;
margin-top: 25rpx;
@@ -245,21 +294,29 @@
float: left;
width: 46rpx;
height: 46rpx;
background-color: #ccc;
overflow: hidden;
margin-right: 16rpx;
margin-top: 25rpx;
}
.next-btn{
float: right;
padding: 0 20rpx;
padding: 0 60rpx 0 20rpx;
height: 62rpx;
line-height: 62rpx;
font-size: 32rpx;
font-size: 30rpx;
background-color: #06f;
color: #fff;
border-radius: 8rpx;
margin-top: 16rpx;
position: relative;
.icon-iamge{
width: 25rpx;
height: 25rpx;
position: absolute;
right: 20rpx;
top: 50%;
margin-top: -12rpx;
}
}
}
}
src/pages/course/index.vue
+1 -1
View File
@@ -24,7 +24,7 @@
></uv-tabs>
</view>
<view class="list-view">
<view class="filter-btn" @click="showFilterList = true">筛选
<view class="filter-btn" @click="showFilterList = !showFilterList">筛选
<uv-icon class="filter-icon" name="list"/>
</view>
<view :class="['filter-list',showFilterList?'show':'']">
src/pages/course/study.vue
+18 -1
View File
@@ -3,7 +3,18 @@
<view class="course-study max_page">
<view class="top-bg"></view>
<view class="bot-bg"></view>
<view class="course-study-body">
<view class="course-study-body" v-show="step === 1">
<view class="body-title">
<uv-icon class="arrow-icon" name="arrow-left" @click="common.navigateBack()"/>
语言选择，开启学习之旅
</view>
<view class="voice-list">
<view class="voice-item">
</view>
</view>
</view>
<view class="course-study-body" v-show="step === 2">
<view class="body-title">
<uv-icon class="arrow-icon" name="arrow-left" @click="common.navigateBack()"/>
课程学习
@@ -25,6 +36,7 @@ import { onLoad } from '@dcloudio/uni-app';
import common from '@/common/common';
import TalkingItem from '@/pages/course/components/talkingItem.vue'
const crsNum = ref('');
const step = ref(1)
const getData = async () => {
console.log(crsNum.value)
};
@@ -109,6 +121,11 @@ onLoad((params) => {
font-weight: 400;
}
}
.voice-list{
flex:1;
overflow-y: auto;
padding: 30rpx;
}
}
}
</style>