From 325621a4177d0f06d4c4767bc27c25c0b7b13135 Mon Sep 17 00:00:00 2001
From: luJianJun <2587063613@qq.com>
Date: Mon, 4 Sep 2023 14:06:04 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/application/popInfo.vue | 287 +++++++++++++----------
 1 file changed, 169 insertions(+), 118 deletions(-)

diff --git a/src/views/system/application/popInfo.vue b/src/views/system/application/popInfo.vue
index 1a5e365..1664011 100644
--- a/src/views/system/application/popInfo.vue
+++ b/src/views/system/application/popInfo.vue
@@ -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>