324 lines
7.7 KiB
Vue
324 lines
7.7 KiB
Vue
<template>
|
||
<view class="ai-answer" v-if="type === 0">
|
||
<view class="user-info">
|
||
<view class="avatar-box">
|
||
<ImagePreview class="img-box" :imgId="''"></ImagePreview>
|
||
</view>
|
||
<view class="ai-name">
|
||
梁安娜
|
||
<view class="ai-name-desc">AI课程教练</view>
|
||
</view>
|
||
</view>
|
||
<view class="talking-info">
|
||
<view class="talking-gif"></view>
|
||
<view class="talking-cont">
|
||
<view class="talking-text">
|
||
阿列克山大是快乐的你艾德卡省的mask安东拉森扣篮大赛了快递那里是啊克里斯蒂娜老师的阿萨是看，
|
||
</view>
|
||
<ImagePreview class="cont-img-box" :imgId="''"></ImagePreview>
|
||
<VideoPreview class="cont-img-box" :imgId="''"></VideoPreview>
|
||
</view>
|
||
<view class="talking-cont">
|
||
<view class="talking-text">
|
||
阿列克山大是快乐的你艾德卡省的mask安东拉森扣篮大赛了快递那里是啊克里斯蒂娜老师的阿萨是看，
|
||
</view>
|
||
</view>
|
||
<view class="btns-cont">
|
||
<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>
|
||
<view class="user-answer" v-else-if="type === 1">
|
||
<view class="user-info">
|
||
<view class="avatar-box">
|
||
<ImagePreview class="img-box" :imgId="''"></ImagePreview>
|
||
</view>
|
||
<view class="ai-name">
|
||
玛卡巴卡
|
||
</view>
|
||
</view>
|
||
|
||
<view class="talking-info">
|
||
<view class="talking-gif"></view>
|
||
<view class="talking-cont">
|
||
<view class="talking-text">
|
||
阿列克山大是快乐的你艾德卡省的mask安东拉森扣篮大赛了快递那里是啊克里斯蒂娜老师的阿萨是看，
|
||
</view>
|
||
</view>
|
||
<view class="btns-cont">
|
||
<!-- <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>
|
||
<view v-else></view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import ImagePreview from '@/components/image-preview/image-preview.vue'
|
||
import VideoPreview from '@/components/image-preview/video-preview.vue'
|
||
import { defineProps } from 'vue';
|
||
const props = defineProps({
|
||
type:{
|
||
default: 0,// 1： userAnswer 0: AIAnswer
|
||
type:[Number,String]
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.ai-answer{
|
||
.user-info{
|
||
overflow: hidden;
|
||
.avatar-box{
|
||
float: left;
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
border: 3rpx solid #fff;
|
||
background-color: #ccc;
|
||
overflow: hidden;
|
||
border-radius: 10rpx;
|
||
margin-right: 16rpx;
|
||
margin-bottom: 16rpx;
|
||
.img-box{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.ai-name{
|
||
float: left;
|
||
color: #666;
|
||
font-size: 25rpx;
|
||
line-height: 35rpx;
|
||
.ai-name-desc{
|
||
color: #999;
|
||
margin-left: 16rpx;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
.talking-info{
|
||
padding: 20rpx;
|
||
border-radius: 15rpx;
|
||
background-color: #aaa;
|
||
.talking-gif{
|
||
width: 140rpx;
|
||
height: 38rpx;
|
||
background-color: #999;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.talking-cont{
|
||
.talking-text{
|
||
font-size: 28rpx;
|
||
line-height: 48rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.cont-img-box{
|
||
width: 433rpx;
|
||
height: 269rpx;
|
||
border-radius: 15rpx;
|
||
overflow: hidden;
|
||
background-color: #eee;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
.btns-cont{
|
||
overflow: hidden;
|
||
border-top: 3rpx solid #eee;
|
||
.replay-btn{
|
||
float: left;
|
||
width: 46rpx;
|
||
height: 46rpx;
|
||
overflow: hidden;
|
||
margin-right: 16rpx;
|
||
margin-top: 25rpx;
|
||
}
|
||
.play-btn{
|
||
float: left;
|
||
width: 46rpx;
|
||
height: 46rpx;
|
||
overflow: hidden;
|
||
margin-right: 16rpx;
|
||
margin-top: 25rpx;
|
||
}
|
||
.next-learn-btn{
|
||
float: left;
|
||
padding: 0 60rpx 0 20rpx;
|
||
height: 62rpx;
|
||
line-height: 62rpx;
|
||
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 60rpx 0 20rpx;
|
||
height: 62rpx;
|
||
line-height: 62rpx;
|
||
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 60rpx 0 20rpx;
|
||
height: 62rpx;
|
||
line-height: 62rpx;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.user-answer{
|
||
|
||
.user-info{
|
||
overflow: hidden;
|
||
.avatar-box{
|
||
float: right;
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
border: 3rpx solid #fff;
|
||
background-color: #ccc;
|
||
overflow: hidden;
|
||
border-radius: 10rpx;
|
||
margin-left: 16rpx;
|
||
margin-bottom: 16rpx;
|
||
.img-box{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.ai-name{
|
||
float: right;
|
||
color: #666;
|
||
font-size: 25rpx;
|
||
line-height: 35rpx;
|
||
}
|
||
}
|
||
|
||
.talking-info{
|
||
padding: 20rpx;
|
||
border-radius: 15rpx;
|
||
background-color: #06f;
|
||
color: #fff;
|
||
.talking-gif{
|
||
width: 140rpx;
|
||
height: 38rpx;
|
||
background-color: #999;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.talking-cont{
|
||
.talking-text{
|
||
font-size: 28rpx;
|
||
line-height: 48rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
.btns-cont{
|
||
overflow: hidden;
|
||
border-top: 3rpx solid #eee;
|
||
.replay-btn{
|
||
float: left;
|
||
width: 46rpx;
|
||
height: 46rpx;
|
||
overflow: hidden;
|
||
margin-right: 16rpx;
|
||
margin-top: 25rpx;
|
||
}
|
||
.play-btn{
|
||
float: left;
|
||
width: 46rpx;
|
||
height: 46rpx;
|
||
overflow: hidden;
|
||
margin-right: 16rpx;
|
||
margin-top: 25rpx;
|
||
}
|
||
.next-btn{
|
||
float: right;
|
||
padding: 0 60rpx 0 20rpx;
|
||
height: 62rpx;
|
||
line-height: 62rpx;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |