🐞 fix(性能测评):性能测评UI整改
This commit is contained in:
Haiyi
parent
84419dd835
commit
5d42eef85c
@ -70,7 +70,7 @@
|
||||
|
||||
.video_box {
|
||||
border-radius: 16px;
|
||||
width: 300px;
|
||||
width: 250px;
|
||||
height: 300px;
|
||||
// background-color: red;
|
||||
position: relative;
|
||||
@ -86,14 +86,25 @@
|
||||
position: absolute;
|
||||
bottom: -100px;
|
||||
z-index: 999;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #337fff;
|
||||
color: #fff;
|
||||
border-bottom-left-radius: 16px;
|
||||
border-bottom-right-radius: 16px;
|
||||
font-size: 26px;
|
||||
// border-bottom-left-radius: 16px;
|
||||
// border-bottom-right-radius: 16px;
|
||||
border-radius: 16px;
|
||||
|
||||
.fonts {
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
margin-left: 10px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,6 +14,8 @@ import { formatImgUrl } from '@/common/fotmat'
|
||||
import { ORDER_STATUS } from '@/common/enum'
|
||||
import IconFont from '@/components/iconfont/iconfont'
|
||||
import { IMG_CND_Prefix } from '@/common/constant'
|
||||
import DotLoading from '@/components/dotLoading'
|
||||
import { MallCherryestimate_catevideoview } from '@/api/material'
|
||||
|
||||
type ShowStatus = 'shop'|'customer'|'order'|'code'
|
||||
interface param {
|
||||
@ -114,6 +116,16 @@ const MoveBtn = ({ showFloatVideo = false, floatVideoFile = [], playVideo = true
|
||||
}
|
||||
}, [playVideo])
|
||||
|
||||
const { fetchData: viewNumsFetch } = MallCherryestimate_catevideoview()
|
||||
|
||||
const handSee = async(e) => {
|
||||
console.log(e, 'eeeee')
|
||||
if (e.detail.fullScreen) {
|
||||
await viewNumsFetch({ id: floatVideoFile[0]?.estimate_video_id })
|
||||
}
|
||||
// e.stopPropagation()
|
||||
}
|
||||
|
||||
return (
|
||||
<MovableArea className={styles.movableItem}>
|
||||
{children}
|
||||
@ -152,7 +164,7 @@ const MoveBtn = ({ showFloatVideo = false, floatVideoFile = [], playVideo = true
|
||||
className={classnames(styles.moveBtn, showVido && showFloatVideo ? styles.no_bg_moveBtn_next : styles.no_bg_moveBtn_next_ever)}
|
||||
direction="all"
|
||||
inertia
|
||||
x="470rpx"
|
||||
x="500rpx"
|
||||
y="100rpx"
|
||||
>
|
||||
|
||||
@ -161,14 +173,21 @@ const MoveBtn = ({ showFloatVideo = false, floatVideoFile = [], playVideo = true
|
||||
<IconFont name="icon-qingchuxinxi" size={60} color="#acacac"></IconFont>
|
||||
</View>
|
||||
<Video
|
||||
style={{ width: '300rpx', height: '400rpx', borderRadius: '32rpx' }}
|
||||
style={{ width: '250rpx', height: '400rpx', borderRadius: '16rpx' }}
|
||||
autoplay
|
||||
id="video"
|
||||
src={floatVideoFile.length ? IMG_CND_Prefix + floatVideoFile[0].video_url[0] : ''}
|
||||
loop
|
||||
onFullScreenChange={e => handSee(e)}
|
||||
object-fit="contain"
|
||||
></Video>
|
||||
<View className={styles.bottom_box}>{floatVideoFile?.[0]?.title}</View>
|
||||
<View className={styles.bottom_box}>
|
||||
<View style={{ marginLeft: '20px' }}>
|
||||
<DotLoading></DotLoading>
|
||||
|
||||
</View>
|
||||
<View className={styles.fonts}>{floatVideoFile?.[0]?.title}</View>
|
||||
</View>
|
||||
</View>
|
||||
</MovableView>}
|
||||
{showCode && <CodeSelect orderObj={orderObj} y={screenHeight.code as number} />}
|
||||
|
||||
@ -188,7 +188,7 @@ page {
|
||||
padding-top: 30px;
|
||||
// width: 100%;
|
||||
border-radius: 16px;
|
||||
height: 450px;
|
||||
// height: 450px;
|
||||
background-color: #fff;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 25px;
|
||||
@ -205,16 +205,16 @@ page {
|
||||
// margin-left: 40px;
|
||||
// margin-top: 30px;
|
||||
margin: 20px;
|
||||
width: 300px;
|
||||
height: 190px;
|
||||
width: 250px;
|
||||
// height: 190px;
|
||||
position: relative;
|
||||
|
||||
.cricle {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
top: 90px;
|
||||
right: 80px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 50%;
|
||||
background-color: #c7c7c7;
|
||||
display: flex;
|
||||
@ -226,7 +226,7 @@ page {
|
||||
margin-left: 20px;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border: 15px solid transparent; /*以下四个样式对应四种三角形，任选其一即可实现*/
|
||||
border: 20px solid transparent; /*以下四个样式对应四种三角形，任选其一即可实现*/
|
||||
/* border-top-color:lightseagreen; */
|
||||
border-left-color: #fff;
|
||||
// border-right-color: lightseagreen;
|
||||
@ -234,34 +234,46 @@ page {
|
||||
}
|
||||
}
|
||||
.img_style {
|
||||
border-top-right-radius: 16px;
|
||||
border-top-left-radius: 16px;
|
||||
border-top-right-radius: 8px;
|
||||
border-top-left-radius: 8px;
|
||||
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
position: absolute;
|
||||
z-index: 12;
|
||||
width: 300px;
|
||||
height: 242px;
|
||||
width: 250px;
|
||||
height: 270px;
|
||||
}
|
||||
.bottom_box {
|
||||
position: absolute;
|
||||
bottom: -102px;
|
||||
z-index: 50;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
background-color: #c9c9c9;
|
||||
color: #fff;
|
||||
border-bottom-left-radius: 16px;
|
||||
border-bottom-right-radius: 16px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.title_name {
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
margin-top: 10px;
|
||||
.bottom_big {
|
||||
margin-top: -12px;
|
||||
width: 247px;
|
||||
height: 100px;
|
||||
border: 1px solid #d0d0d0;
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
.bottom_box {
|
||||
// position: absolute;
|
||||
// bottom: -102px;
|
||||
// z-index: 50;
|
||||
// text-align: center;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
// line-height: 50px;
|
||||
// background-color: #c9c9c9;
|
||||
color: #343434;
|
||||
font-weight: 500;
|
||||
|
||||
font-size: 26px;
|
||||
}
|
||||
.title_name {
|
||||
// text-align: center;
|
||||
font-size: 28px;
|
||||
margin-left: 10px;
|
||||
color: #999999;
|
||||
// margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tag_box {
|
||||
|
||||
@ -375,7 +375,7 @@ const Details = (props: Params) => {
|
||||
<View className={styles.flexBox}>
|
||||
<View className={styles.title}>商品参数</View>
|
||||
{
|
||||
productInfo.is_instruct && <View className={styles.flexRight} onClick={() => setshowPopup(true)}>{'特色百科 >'}</View>
|
||||
productInfo.is_instruct && <View className={styles.flexRight} onClick={() => setshowPopup(true)}>{'详细信息 >'}</View>
|
||||
}
|
||||
</View>
|
||||
<View className={styles.con}>
|
||||
@ -427,7 +427,7 @@ const Details = (props: Params) => {
|
||||
mode="aspectFill"
|
||||
></Image>
|
||||
<Video
|
||||
style={{ width: '300rpx', height: '290rpx', borderRadius: '16rpx' }}
|
||||
style={{ width: '250rpx', height: '270rpx', borderTopLeftRadius: '8rpx', borderTopRightRadius: '8rpx' }}
|
||||
id={`video${index}`}
|
||||
src={IMG_CND_Prefix + item.video_url[0]}
|
||||
object-fit="contain"
|
||||
@ -436,8 +436,10 @@ const Details = (props: Params) => {
|
||||
show-fullscreen-btn={false}
|
||||
onFullScreenChange={event => handleClose(event, `video${index}`)}
|
||||
></Video>
|
||||
<View className={styles.bottom_box}>{item.title}</View>
|
||||
<View className={styles.title_name}>{item.result}</View>
|
||||
<View className={styles.bottom_big}>
|
||||
<View className={styles.bottom_box}>{item.title}</View>
|
||||
<View className={styles.title_name}>{item.result}</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user