XiaoMo/x-php-Admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式修改

Browse Source
This commit is contained in:
luJianJun 2023-09-04 14:06:04 +08:00
parent 7fa1618e2c
commit 325621a417
1 changed files with 169 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

287
src/views/system/application/popInfo.vue
View File

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