Merge branch 'master' of https://x--mo.com:9003/XiaoMo/x-php-Admin

src/views/system/application/popInfo.vue

@@ -1,5 +1,6 @@
 <template>
-    <div class="info-box dis-f jus-x al-item text-f">
+    <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">
@@ -8,26 +9,26 @@
             </div>
             <div class="info-data-box">
                 <div class="dis-f al-item jus-bet">
-                <div class="dis-f al-item">
+                    <div class="dis-f al-item" style="flex:0.75;">
                         <img src="" class="img" alt="">
-                    <div>
+                        <div style="flex:1;">
                             <div class="data-title">123</div>
                             <div class="data-info-text">123456</div>
-                        <div class="data-info-type data-info-type-m jus-x">
+                            <span class="data-info-type data-info-type-m jus-x">
                                 免费
+                            </span>
                         </div>
                     </div>
-                </div>
-                <div class="install-btn">
+                    <div class="install-btn" style="flex:0.2;">
                         安装
                     </div>
                 </div>
                 <div class="plugin-tag-title">
                     插件详情
                 </div>
-            <div class="dis-f jus-bet al-item">
+                <div class="plugin-box">
                     <source src="/media/cc0-videos/flower.mp4" class="info-video" type="video/mp4" />
-                <img src="" class="info-video" alt="">
+                    <img src="../../../assets/img/404.png" class="info-video" alt="">
                 </div>
                 <div class="plugin-introduce">
                     1234567894513
@@ -74,6 +75,7 @@
                 </div>
             </div>
         </div>
+    </div>
 </template>
 
 <script setup>
@@ -92,10 +94,12 @@ let closePop = ()=>{
 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;
     font-variant-numeric: tabular-nums;
 }
+
 .dis-f {
     display: flex;
 }
@@ -127,6 +131,17 @@ img{
 .pos-r {
     position: relative;
 }
+
+.pop-bg {
+    background: #fff;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 90%;
+    background: #fff;
+    width: 100%;
+}
+
 .help-btn {
     background: #fff;
     color: #141e31;
@@ -146,9 +161,11 @@ img{
     cursor: pointer;
     width: 120px;
 }
+
 .help-btn .text-mg {
     margin-left: 5px;
 }
+
 .history-text {
     color: #409eff;
     color: #409eff;
@@ -157,6 +174,7 @@ img{
     margin-left: 4px;
     text-decoration: underline;
 }
+
 .business-type {
     background: #e6e8ed;
     border: 1px solid #e6e8ed;
@@ -186,29 +204,35 @@ 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;
+    word-wrap: break-word;
+    max-width: 100%;
 }
 
 .info-video {
     width: calc(50% - 20px);
-    height:330px;
+    max-height: 330px;
     margin-bottom: 20px;
 }
 
@@ -249,6 +273,7 @@ img{
     font-weight: 400;
     height: 36px;
     padding: 0 20px;
+    max-width: 110px;
     line-height: 34px;
 }
 
@@ -257,14 +282,10 @@ img{
 }
 
 .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>