1

src/views/system/social-media/xianyu-wenan.vue

@@ -35,12 +35,16 @@
       </el-collapse-transition>
 
       <div class="input-section">
-        <el-form :model="form" label-width="100px" class="main-form">
+        <el-form
+          :model="form"
+          :label-width="labelWidth"
+          :label-position="labelPosition"
+          class="main-form">
           <el-form-item label="商品标题" required>
             <el-input
               v-model="form.title"
               type="textarea"
-              :rows="2"
+              :rows="mobile ? 3 : 2"
               placeholder="请输入商品标题（必填）"
               clearable />
           </el-form-item>
@@ -53,6 +57,7 @@
           <el-form-item>
             <el-button
               type="primary"
+              class="btn-generate"
               :loading="generating"
               @click="handleGenerate">
               生成闲鱼文案
@@ -62,14 +67,15 @@
       </div>
 
       <div v-if="result.daixiadan || result.jiaonixiadan" class="result-section">
-        <el-row :gutter="20">
+        <el-row :gutter="gutter">
-          <el-col :span="12">
+          <el-col :xs="24" :sm="24" :md="12">
             <el-card shadow="hover" class="result-card">
-              <div slot="header" class="clearfix">
+              <div slot="header" class="result-card-header">
-                <span>代下单（一键代下）</span>
+                <span class="result-card-title">代下单（一键代下）</span>
                 <el-button
-                  type="text"
+                  type="primary"
-                  style="float: right; padding: 0"
+                  size="small"
+                  class="btn-copy"
                   @click="copyResult('daixiadan')">
                   <i class="el-icon-document-copy"></i> 复制
                 </el-button>
@@ -77,13 +83,14 @@
               <div class="result-content">{{ result.daixiadan }}</div>
             </el-card>
           </el-col>
-          <el-col :span="12">
+          <el-col :xs="24" :sm="24" :md="12">
             <el-card shadow="hover" class="result-card">
-              <div slot="header" class="clearfix">
+              <div slot="header" class="result-card-header">
-                <span>教你下单</span>
+                <span class="result-card-title">教你下单</span>
                 <el-button
-                  type="text"
+                  type="primary"
-                  style="float: right; padding: 0"
+                  size="small"
+                  class="btn-copy"
                   @click="copyResult('jiaonixiadan')">
                   <i class="el-icon-document-copy"></i> 复制
                 </el-button>
@@ -113,10 +120,38 @@ export default {
         daixiadan: '',
         jiaonixiadan: ''
       },
-      generating: false
+      generating: false,
+      mobile: false,
+      resizeTimer: null
     }
   },
+  computed: {
+    labelWidth() {
+      return this.mobile ? '80px' : '100px'
+    },
+    labelPosition() {
+      return this.mobile ? 'top' : 'right'
+    },
+    gutter() {
+      return this.mobile ? 12 : 20
+    }
+  },
+  mounted() {
+    this.checkMobile()
+    window.addEventListener('resize', this.onResize)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.onResize)
+    if (this.resizeTimer) clearTimeout(this.resizeTimer)
+  },
   methods: {
+    checkMobile() {
+      this.mobile = document.documentElement.clientWidth < 768
+    },
+    onResize() {
+      if (this.resizeTimer) clearTimeout(this.resizeTimer)
+      this.resizeTimer = setTimeout(this.checkMobile, 150)
+    },
     async handleGenerate() {
       const title = (this.form.title || '').trim()
       if (!title) {
@@ -186,9 +221,11 @@ export default {
 <style lang="scss" scoped>
 .xianyu-wenan-container {
   padding: 10px;
+  box-sizing: border-box;
 }
 .box-card {
   max-width: 1200px;
+  margin: 0 auto;
 }
 .card-title {
   font-size: 16px;
@@ -206,6 +243,21 @@ export default {
 .result-card {
   margin-bottom: 16px;
 }
+.result-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.result-card-title {
+  font-weight: 500;
+  flex: 1;
+  min-width: 0;
+}
+.btn-copy {
+  flex-shrink: 0;
+}
 .result-content {
   white-space: pre-wrap;
   word-break: break-all;
@@ -213,5 +265,80 @@ export default {
   line-height: 1.6;
   max-height: 400px;
   overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 移动端适配 */
+@media (max-width: 767px) {
+  .xianyu-wenan-container {
+    padding: 8px;
+  }
+  .box-card {
+    margin: 0 -8px;
+    border-radius: 0;
+  }
+  .box-card ::v-deep .el-card__header {
+    padding: 12px 15px;
+    font-size: 15px;
+  }
+  .box-card ::v-deep .el-card__body {
+    padding: 12px 15px;
+  }
+  .card-title {
+    font-size: 15px;
+  }
+  .help-section {
+    margin-bottom: 12px;
+  }
+  .help-section ::v-deep .el-alert__content {
+    font-size: 13px;
+  }
+  .input-section {
+    margin-bottom: 16px;
+  }
+  .main-form ::v-deep .el-form-item {
+    margin-bottom: 14px;
+  }
+  .main-form ::v-deep .el-form-item__label {
+    padding-bottom: 4px;
+  }
+  .btn-generate {
+    width: 100%;
+    display: block;
+    height: 44px;
+    font-size: 15px;
+  }
+  .result-section {
+    margin-top: 16px;
+  }
+  .result-section ::v-deep .el-row {
+    margin-left: -6px !important;
+    margin-right: -6px !important;
+  }
+  .result-section ::v-deep .el-col {
+    padding-left: 6px !important;
+    padding-right: 6px !important;
+  }
+  .result-card {
+    margin-bottom: 12px;
+  }
+  .result-card ::v-deep .el-card__header {
+    padding: 10px 12px;
+  }
+  .result-card ::v-deep .el-card__body {
+    padding: 10px 12px;
+  }
+  .result-card-title {
+    font-size: 14px;
+  }
+  .btn-copy {
+    min-height: 36px;
+    padding: 8px 12px;
+  }
+  .result-content {
+    font-size: 13px;
+    max-height: 320px;
+    padding: 2px 0;
+  }
 }
 </style>