1.独立ai外墙同步

2.独立ai全部页面头部固定同步

src/styles/index.scss

@@ -9,15 +9,32 @@ html {
     font-size: 75%;
   }
   // ai设计板块
- @media screen and (min-width: 700px) {
+  @media screen and (min-width: 700px) {
     .AI-Design-container {
       max-width: 420px;
       padding: 0;
       margin: 0 auto;
       overflow: hidden;
-      width:100%;
+      width: 100%;
+    }
+  }
+
+  .AI-Design-container {
+    position: relative;
+
+    .header {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      z-index: 9999999;
+    }
+
+    .header+div {
+      padding-top: 50px;
     }
   }
+
   body {
     padding: 0;
     margin: 0;

src/views/AIDesign/design.vue

@@ -219,7 +219,22 @@
             <img width="12" :src="require('@/assets/AIDesign/rightjt.png')" />
           </div>
         </div>
-
+        <!-- 墙裙 -->
+        <div class="design-option">
+          <div class="option-title">墙裙</div>
+          <div class="option-grid stone-colors-grid" ref="skirtTypesRef" @mousedown="handleMouseDown"
+            @mousemove="handleMouseMove" @mouseup="handleMouseUp" @mouseleave="handleMouseUp">
+            <div v-for="(skirt, index) in skirtTypes" :key="index" class="option-item"
+              :class="{ active: selectedSkirtType === skirt.value }"
+              @click="selectSkirtType(skirt.value, 'skirtTypesRef', index)">
+              <div class="tile-icon" :style="{ backgroundImage: `url(${imgBaseUrl}${skirt.imgPath})` }"></div>
+              <div class="tile-name">{{ skirt.text }}</div>
+            </div>
+          </div>
+          <div class="rightArrows">
+            <img width="12" :src="require('@/assets/AIDesign/rightjt.png')" />
+          </div>
+        </div>
         <!-- 琉璃瓦 -->
         <div class="design-option">
           <div class="option-title">琉璃瓦</div>
@@ -227,10 +242,7 @@
             @mousemove="handleMouseMove" @mouseup="handleMouseUp" @mouseleave="handleMouseUp">
             <div v-for="(tile, index) in tiles" :key="index" class="option-item"
               :class="{ active: selectedTile === tile.value }" @click="selectTile(tile.value, 'tilesRef', index)">
-              <div v-if="tile.value != '无'" class="tile-color" :style="{ backgroundColor: tile.value }"></div>
-              <div v-else class="split-icon">
-                <img width="50" :src="require('@/assets/AIDesign/nothing1.png')" />
-              </div>
+              <div class="tile-icon" :style="{ backgroundImage: `url(${imgBaseUrl}${tile.imgPath})` }"></div>
               <div class="tile-name">{{ tile.text }}</div>
             </div>
           </div>
@@ -371,6 +383,7 @@ export default class extends Vue {
     windowsRef: HTMLDivElement;
     railingsRef: HTMLDivElement;
     tilesRef: HTMLDivElement;
+    skirtTypesRef : HTMLDivElement;
   };
 
   private readState = true;
@@ -413,6 +426,8 @@ export default class extends Vue {
   private railings = []; // 浇筑栏杆选项
   private tiles = []; // 琉璃瓦选项
   private ColumnTypes = [];// 罗马柱选项
+  private skirtTypes = [];// 墙裙
+
   // 外墙质感
   private DesignStyle = null;//设计风格
   private ColorCard = null;//电子色卡
@@ -422,6 +437,8 @@ export default class extends Vue {
   private selectedRailing = null;//栏杆
   private selectedWindowFrame = null;//窗套样式
   private selectedTile = null;//琉璃瓦
+  private selectedSkirtType = null;//墙裙
+
 
   private color_options = [];//外墙平涂列表
   private color_selItem = null;//选中的外墙平涂
@@ -477,6 +494,7 @@ export default class extends Vue {
     this.selectedRailing = null;
     this.selectedColumnType = null;//罗马柱
     this.selectedTile = null;
+    this.selectedSkirtType = null;
     this.showChooseProject = false;
     this.isNeedProject = null;
     this.showPreviewList = false;
@@ -662,7 +680,8 @@ export default class extends Vue {
           this.selectedSplit = response.Data.F_DivisionMethod || this.splitWays[0].value;
           this.selectedWindowFrame = response.Data.F_WindowsColor || this.windowFrames[0].value;
           this.selectedRailing = response.Data.F_CastRailing || this.railings[0].value;
-          this.selectedTile = response.Data.F_GlazedTile || this.tiles[0].value;
+          this.selectedTile = response.Data.F_GlazedTile || this.tiles[0].value;//新琉璃瓦
+          this.selectedSkirtType = response.Data.F_SkirtType || this.skirtTypes[0].value;//墙裙
           this.oldf_id = response.Data.F_ID;
           this.color_selValue = response.Data.F_Color || null;// 外墙平涂选中的值
           if (this.color_selValue) {
@@ -814,6 +833,11 @@ export default class extends Vue {
     this.autoScrollToActive(refsName, selcIndex); // 选中后触发自动滚动
   }
 
+  private selectSkirtType(value: string, refsName: string, selcIndex: number) {
+    this.selectedSkirtType = value;
+    this.autoScrollToActive(refsName, selcIndex); // 选中后触发自动滚动
+  }
+
   private selectColumnType(value: string, refsName: string, selcIndex: number) {
     this.selectedColumnType = value;
     this.autoScrollToActive(refsName, selcIndex); // 选中后触发自动滚动
@@ -888,6 +912,7 @@ export default class extends Vue {
       const uCastRailing = this.selectedRailing === '无' ? '' : this.selectedRailing;
       const uColumnType = this.selectedColumnType === '无' ? '' : this.selectedColumnType;//没有传空
       const uGlazedTile = this.selectedTile === '无' ? '' : this.selectedTile;
+      const uSkirtType = this.selectedSkirtType === '无' ? '' : this.selectedSkirtType;
       formData.append('DesignStyle', uDesignStyle);
       formData.append('ColorCard', uColorCard);
       formData.append('DeepGrooveTech', uSelectedProcess);
@@ -896,6 +921,8 @@ export default class extends Vue {
       formData.append('CastRailing', uCastRailing);
       formData.append('GlazedTile', uGlazedTile);
       formData.append('columnType', uColumnType);//罗马柱
+      formData.append('skirtType', uSkirtType);//墙裙
+
     } else if (this.activeName === '外墙平涂') {
       formData.append('DesignStyle', "CHANGE_COLOR");
       formData.append('Color', this.color_selValue)
@@ -1099,9 +1126,11 @@ export default class extends Vue {
         // 浇筑栏杆选项
         this.railings = response.Data.dict.CastRailing;
         // 琉璃瓦选项
-        this.tiles = response.Data.dict.GlazedTile;
+        this.tiles = response.Data.dict.NewGlazedTile;
         // 外墙平涂
         this.color_options = response.Data.dict.outsideColor;
+        // 墙裙
+        this.skirtTypes = response.Data.dict.outsideSkirtType;
         // 罗马柱选项
         if (this.designStyles && this.designStyles[0] && this.designStyles[0].subitems) {
           this.ColumnTypes = this.designStyles[0].subitems || [];
@@ -1136,6 +1165,7 @@ export default class extends Vue {
     this.selectedWindowFrame = this.windowFrames[0].value;
     this.selectedRailing = this.railings[0].value;
     this.selectedTile = this.tiles[0].value;
+    this.selectedSkirtType = this.skirtTypes[0].value;
   }
 
   //关联列表模糊查询
@@ -1840,7 +1870,8 @@ export default class extends Vue {
 
 .process-icon,
 .split-icon,
-.railing-icon {
+.railing-icon,
+.tile-icon {
   width: 50px;
   height: 50px;
   display: flex;
@@ -1851,7 +1882,8 @@ export default class extends Vue {
 }
 
 .split-icon,
-.railing-icon {
+.railing-icon,
+.tile-icon {
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
@@ -1878,6 +1910,9 @@ export default class extends Vue {
 .tile-name {
   font-size: 12px;
   color: #666;
+  line-height: 13px;
+  padding-top: 2px;
+  display: inline-block;
 }
 
 .generate-section {