样式修改

src/views/enterprisePurchase/index.vue

@@ -223,38 +223,22 @@
       <!-- 快捷入口编辑区 -->
       <div v-else-if="activeSubTab === 'quick-entry'" class="quick-entry-editor">
         <div class="preview-section">
-          <div class="preview-title">快捷入口实时预览 (尺寸: 230 * 167)</div>
+          <div class="preview-title">快捷入口实时预览</div>
           <div class="quick-entry-preview-outer">
-            <!-- 仿真预览模块 (230*167) -->
+            <!-- 仿真预览模块 (230*92) -->
             <div class="qe-mockup-card">
               <div class="qe-card-header">
                 <span class="qe-card-title">{{ quickEntrySettings.moduleName }}</span>
                 <el-icon class="qe-header-arrow"><ArrowRight /></el-icon>
               </div>
 
-              <div class="qe-grid-container">
-                <div class="qe-grid-wrapper" :style="{ transform: `translateX(-${qePageIndex * 198}px)` }">
-                  <!-- 网格页 -->
-                  <div v-for="pageIdx in qePageCount" :key="pageIdx" class="qe-grid-page">
-                    <div v-for="(item, idx) in getPageItems(pageIdx - 1)" :key="idx" class="qe-item">
-                      <div class="qe-icon-wrap">
-                        <img v-if="item.icon" :src="item.icon" class="qe-icon-img" />
-                        <el-icon v-else class="qe-icon-placeholder"><Menu /></el-icon>
-                        <div v-if="item.tag" class="qe-tag-bubble">{{ item.tag }}</div>
-                      </div>
-                      <span class="qe-name">{{ item.name }}</span>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- 左右翻页按钮 (仅在多于8项时显示) -->
-                <div v-if="quickEntryList.length > 8" class="qe-nav-btns">
-                  <div v-if="qePageIndex > 0" class="qe-nav-btn prev" @click="qePageIndex--">
-                    <el-icon><ArrowLeft /></el-icon>
-                  </div>
-                  <div v-if="qePageIndex < qePageCount - 1" class="qe-nav-btn next" @click="qePageIndex++">
-                    <el-icon><ArrowRight /></el-icon>
+              <div class="qe-grid-container-four">
+                <div v-for="(item, idx) in quickEntryList" :key="idx" class="qe-item-four">
+                  <div class="qe-icon-wrap-four">
+                    <img v-if="item.icon" :src="item.icon" class="qe-icon-img-four" />
+                    <el-icon v-else class="qe-icon-placeholder-four"><Menu /></el-icon>
                   </div>
+                  <span class="qe-name-four">{{ item.name }}</span>
                 </div>
               </div>
             </div>
@@ -272,7 +256,7 @@
                 <el-input v-model="quickEntrySettings.moduleName" placeholder="如：企业工作台" />
               </el-form-item>
               <el-form-item label="跳转地址：">
-                <WebLinkInput v-model="quickEntrySettings.jumpLink" placeholder="标题点击跳转地址" style="width: 300px" />
+                <el-input v-model="quickEntrySettings.jumpLink" placeholder="标题点击跳转地址" style="width: 300px" />
               </el-form-item>
             </el-form>
           </div>
@@ -281,8 +265,8 @@
             <span class="section-title">入口项管理列表</span>
           </div>
           <div class="list-toolbar">
-            <div class="drag-tip">提示：一页显示8个，超过8个将自动启用预览区右滑功能</div>
-            <el-button type="primary" icon="Plus" @click="handleAddQuickEntry">新增入口</el-button>
+            <div class="drag-tip">提示：最多添加 4 个入口项</div>
+            <el-button v-if="quickEntryList.length < 4" type="primary" icon="Plus" @click="handleAddQuickEntry">新增入口</el-button>
           </div>
 
           <el-table :data="quickEntryList" border style="width: 100%" header-cell-class-name="table-header-custom">
@@ -707,7 +691,7 @@
               </div>
             </div>
           </div>
-          <div class="preview-tip">尺寸要求：1600 * 158，支持响应式隐藏及主题色联动</div>
+          <div class="preview-tip">尺寸要求：1600 * 188，支持响应式隐藏及主题色联动</div>
         </div>
 
         <!-- 全局配置 -->
@@ -5507,7 +5491,7 @@ watch(activeSubTab, (newVal) => {
 .scenario-preview-box-clean {
   width: 1600px;
   max-width: 100%;
-  height: 158px;
+  height: 188px;
   background: var(--s-theme-color, #66e0a3);
   border-radius: 16px; /* 加大圆角 */
   display: flex;
@@ -5556,8 +5540,8 @@ watch(activeSubTab, (newVal) => {
 }
 
 .scenario-card-premium {
-  width: 288px;
-  height: 130px;
+  width: 260px;
+  height: 160px;
   border-radius: 8px;
   display: flex;
   flex-direction: column;
@@ -5565,7 +5549,7 @@ watch(activeSubTab, (newVal) => {
 }
 
 .card-top-header {
-  height: 42px; /* 固定高度，确保下方图片间距准确 */
+  height: 40px; /* 固定高度，确保下方图片间距准确 */
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -5601,8 +5585,8 @@ watch(activeSubTab, (newVal) => {
 }
 
 .card-image-content {
-  width: 272px;
-  height: 80px;
+  width: 244px;
+  height: 112px;
   margin: 0 8px 8px 8px; /* 左右下保留相同间距 (8px) */
   border-radius: 4px;
   overflow: hidden;
@@ -5780,7 +5764,7 @@ watch(activeSubTab, (newVal) => {
 
 .qe-mockup-card {
   width: 230px;
-  height: 167px;
+  height: 92px;
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
@@ -5810,120 +5794,46 @@ watch(activeSubTab, (newVal) => {
   color: #999;
 }
 
-.qe-grid-container {
-  width: 198px;
-  height: 108px;
-  margin: 0 auto;
-  position: relative;
-  overflow: hidden;
-}
-
-.qe-grid-wrapper {
+.qe-grid-container-four {
+  width: 100%;
   display: flex;
-  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  height: 100%;
-}
-
-.qe-grid-page {
-  width: 198px;
-  flex-shrink: 0;
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-template-rows: repeat(2, 1fr);
-  gap: 12px 0;
+  justify-content: space-between;
+  align-items: center;
 }
 
-.qe-item {
+.qe-item-four {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
+  flex: 1;
 }
 
-.qe-icon-wrap {
-  width: 24px;
-  height: 24px;
+.qe-icon-wrap-four {
+  width: 22px;
+  height: 22px;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.qe-icon-img {
-  width: 24px;
-  height: 24px;
+.qe-icon-img-four {
+  width: 22px;
+  height: 22px;
   object-fit: contain;
 }
 
-.qe-icon-placeholder {
-  font-size: 20px;
+.qe-icon-placeholder-four {
+  font-size: 18px;
   color: #666;
 }
 
-.qe-tag-bubble {
-  position: absolute;
-  top: -8px;
-  right: -15px;
-  background: #ff4d4f;
-  color: #fff;
-  font-size: 9px; /* 精确 9px */
-  padding: 1px 5px;
-  border-radius: 10px;
-  white-space: nowrap;
-  transform: scale(0.9);
-  z-index: 100; /* 提升至最高图层 */
-}
-
-.qe-name {
-  font-size: 11px; /* 精确 11px */
+.qe-name-four {
+  font-size: 11px;
   color: #333;
-  text-align: center;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
 }
-
-.qe-nav-btns {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-}
-
-.qe-nav-btn {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 22px;
-  height: 22px;
-  background: rgba(255, 255, 255, 0.9);
-  border-radius: 50%;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  pointer-events: auto;
-  color: #666;
-  z-index: 110; /* 提升至最高图层，确保不被内容遮挡 */
-}
-
-.qe-nav-btn:hover {
-  background: #fff;
-  color: #e60012;
-}
-
-.qe-nav-btn.prev {
-  left: -10px;
-}
-.qe-nav-btn.next {
-  right: -10px;
-}
-
-/* 快捷入口编辑器特定样式 */
 .quick-entry-editor {
   display: flex;
   flex-direction: column;