样式修改
This commit is contained in:
parent
7fa1618e2c
commit
325621a417
@ -1,74 +1,76 @@
|
||||
<template>
|
||||
<div class="info-box dis-f jus-x al-item text-f">
|
||||
<div class="title">
|
||||
{{ 123456 }}
|
||||
<div class="close" @click="closePop">
|
||||
<el-icon><el-icon-close-bold /></el-icon>
|
||||
<div class="dis-f jus-x pop-bg">
|
||||
<div class="info-box dis-f jus-x al-item text-f pos-r">
|
||||
<div class="title">
|
||||
{{ 123456 }}
|
||||
<div class="close" @click="closePop">
|
||||
<el-icon><el-icon-close-bold /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-data-box">
|
||||
<div class="dis-f al-item jus-bet">
|
||||
<div class="dis-f al-item">
|
||||
<img src="" class="img" alt="">
|
||||
<div>
|
||||
<div class="data-title">123</div>
|
||||
<div class="data-info-text">123456</div>
|
||||
<div class="data-info-type data-info-type-m jus-x">
|
||||
免费
|
||||
<div class="info-data-box">
|
||||
<div class="dis-f al-item jus-bet">
|
||||
<div class="dis-f al-item" style="flex:0.75;">
|
||||
<img src="" class="img" alt="">
|
||||
<div style="flex:1;">
|
||||
<div class="data-title">123</div>
|
||||
<div class="data-info-text">123456</div>
|
||||
<span class="data-info-type data-info-type-m jus-x">
|
||||
免费
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="install-btn">
|
||||
安装
|
||||
</div>
|
||||
</div>
|
||||
<div class="plugin-tag-title">
|
||||
插件详情
|
||||
</div>
|
||||
<div class="dis-f jus-bet al-item">
|
||||
<source src="/media/cc0-videos/flower.mp4" class="info-video" type="video/mp4" />
|
||||
<img src="" class="info-video" alt="">
|
||||
</div>
|
||||
<div class="plugin-introduce">
|
||||
1234567894513
|
||||
</div>
|
||||
<div class="plugin-tag-title">
|
||||
相关详情
|
||||
</div>
|
||||
<div class="related-details">
|
||||
<div class="box">
|
||||
<div style="margin-bottom:8px;">
|
||||
版本
|
||||
</div>
|
||||
<div class="text">
|
||||
v1.10.1 <span class="history-text">版本历史</span>
|
||||
<div class="install-btn" style="flex:0.2;">
|
||||
安装
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="box">
|
||||
<div style="margin-bottom:8px;">开发者</div>
|
||||
<div class="text">
|
||||
123456456456456
|
||||
</div>
|
||||
<div class="plugin-tag-title">
|
||||
插件详情
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="box">
|
||||
<div style="margin-bottom:8px;">业务场景</div>
|
||||
<div class="dis-f" style="flex-wrap: wrap;">
|
||||
<div class="business-type">123456</div>
|
||||
<div class="business-type">2</div>
|
||||
</div>
|
||||
<div class="plugin-box">
|
||||
<source src="/media/cc0-videos/flower.mp4" class="info-video" type="video/mp4" />
|
||||
<img src="../../../assets/img/404.png" class="info-video" alt="">
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="box">
|
||||
<div style="margin-bottom:8px;">
|
||||
帮助
|
||||
<div class="plugin-introduce">
|
||||
1234567894513
|
||||
</div>
|
||||
<div class="plugin-tag-title">
|
||||
相关详情
|
||||
</div>
|
||||
<div class="related-details">
|
||||
<div class="box">
|
||||
<div style="margin-bottom:8px;">
|
||||
版本
|
||||
</div>
|
||||
<div class="text">
|
||||
v1.10.1 <span class="history-text">版本历史</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-f al-item help-btn jus-x">
|
||||
<el-icon><el-icon-collection /></el-icon>
|
||||
<span class="text-mg">
|
||||
使用说明
|
||||
</span>
|
||||
<div class="line"></div>
|
||||
<div class="box">
|
||||
<div style="margin-bottom:8px;">开发者</div>
|
||||
<div class="text">
|
||||
123456456456456
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="box">
|
||||
<div style="margin-bottom:8px;">业务场景</div>
|
||||
<div class="dis-f" style="flex-wrap: wrap;">
|
||||
<div class="business-type">123456</div>
|
||||
<div class="business-type">2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="box">
|
||||
<div style="margin-bottom:8px;">
|
||||
帮助
|
||||
</div>
|
||||
<div class="dis-f al-item help-btn jus-x">
|
||||
<el-icon><el-icon-collection /></el-icon>
|
||||
<span class="text-mg">
|
||||
使用说明
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -78,24 +80,26 @@
|
||||
|
||||
<script setup>
|
||||
import { defineProps } from 'vue'
|
||||
let props=defineProps({
|
||||
showPop:Function,
|
||||
let props = defineProps({
|
||||
showPop: Function,
|
||||
})
|
||||
|
||||
//关闭弹窗
|
||||
let closePop = ()=>{
|
||||
let closePop = () => {
|
||||
props.showPop()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
img{
|
||||
img {
|
||||
object-fit: contain;
|
||||
}
|
||||
.text-f{
|
||||
font-family: -apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
|
||||
|
||||
.text-f {
|
||||
font-family: -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.dis-f {
|
||||
display: flex;
|
||||
}
|
||||
@ -127,7 +131,18 @@ img{
|
||||
.pos-r {
|
||||
position: relative;
|
||||
}
|
||||
.help-btn{
|
||||
|
||||
.pop-bg {
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 90%;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.help-btn {
|
||||
background: #fff;
|
||||
color: #141e31;
|
||||
height: 32px;
|
||||
@ -144,12 +159,14 @@ img{
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
width:120px;
|
||||
width: 120px;
|
||||
}
|
||||
.help-btn .text-mg{
|
||||
margin-left:5px ;
|
||||
|
||||
.help-btn .text-mg {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.history-text{
|
||||
|
||||
.history-text {
|
||||
color: #409eff;
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
@ -157,7 +174,8 @@ img{
|
||||
margin-left: 4px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.business-type{
|
||||
|
||||
.business-type {
|
||||
background: #e6e8ed;
|
||||
border: 1px solid #e6e8ed;
|
||||
border-radius: 12px;
|
||||
@ -165,10 +183,10 @@ img{
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
padding: 2px 6px;
|
||||
margin:0 4px 4px 0;
|
||||
margin: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.related-details{
|
||||
.related-details {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
@ -186,30 +204,36 @@ img{
|
||||
font-weight: 400;
|
||||
width: 100%;
|
||||
}
|
||||
.related-details .line{
|
||||
height:76px;
|
||||
margin:0 20px;
|
||||
background:#ebecee;
|
||||
width:1px;
|
||||
}
|
||||
.related-details .text{
|
||||
color: #141e31;
|
||||
}
|
||||
.related-details .box{
|
||||
width: calc(25% - 1px);
|
||||
}
|
||||
.plugin-introduce{
|
||||
white-space: pre-wrap;
|
||||
color: #141e31;
|
||||
font-family: -apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 14px;
|
||||
|
||||
.related-details .line {
|
||||
height: 76px;
|
||||
margin: 0 20px;
|
||||
background: #ebecee;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.info-video{
|
||||
width:calc(50% - 20px);
|
||||
height:330px;
|
||||
margin-bottom:20px;
|
||||
.related-details .text {
|
||||
color: #141e31;
|
||||
}
|
||||
|
||||
.related-details .box {
|
||||
width: calc(25% - 1px);
|
||||
}
|
||||
|
||||
.plugin-introduce {
|
||||
white-space: pre-wrap;
|
||||
color: #141e31;
|
||||
font-family: -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 14px;
|
||||
word-wrap: break-word;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.info-video {
|
||||
width: calc(50% - 20px);
|
||||
max-height: 330px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.plugin-tag-title {
|
||||
@ -220,7 +244,7 @@ img{
|
||||
line-height: 22px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 30px;
|
||||
font-family: -apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
|
||||
font-family: -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
@ -249,22 +273,19 @@ img{
|
||||
font-weight: 400;
|
||||
height: 36px;
|
||||
padding: 0 20px;
|
||||
max-width: 110px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.install-btn:hover{
|
||||
background:#65affb;
|
||||
.install-btn:hover {
|
||||
background: #65affb;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 90%;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
min-width:1200px;
|
||||
max-width: 1200px;
|
||||
min-width: 375px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info-box .title {
|
||||
@ -272,7 +293,7 @@ img{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #ebecee;
|
||||
border-bottom: 1px solid #ebecee;
|
||||
font-size: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
@ -294,7 +315,7 @@ img{
|
||||
flex: 1;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
overflow-y:hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.info-data-box .img {
|
||||
@ -306,13 +327,16 @@ img{
|
||||
|
||||
.info-data-box .data-title {
|
||||
color: #141e31;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
max-width: 100%;
|
||||
word-wrap: break-word;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.info-data-box .data-info-text {
|
||||
@ -331,24 +355,51 @@ img{
|
||||
}
|
||||
|
||||
.info-data-box .data-info-type {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
background: #f0f1f4;
|
||||
border: 1px solid #f0f1f4;
|
||||
border-radius: 12px;
|
||||
color: #525967;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
padding: 2px 6px;
|
||||
margin-top: 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.info-data-box .data-info-type-m {
|
||||
background-color: rgba(36, 138, 249, .15);
|
||||
color: #2f7deb;
|
||||
}
|
||||
|
||||
.plugin-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width:550px) {
|
||||
.plugin-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.related-details {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.related-details .box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.related-details .line {
|
||||
height: 1px;
|
||||
margin:20px 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user