diy

src/api/diy/index.ts

@@ -146,3 +146,12 @@ export function template(query: any) {
     params: query
   });
 }
+
+// 大客户站点商品
+export function getCustomerProductPage(query: any) {
+  return request({
+    url: '/product/indexSiteProduct/getCustomerProductPage',
+    method: 'get',
+    params: query
+  });
+}

src/components/goodsDialog/index.vue

@@ -96,6 +96,8 @@ import { Search } from '@element-plus/icons-vue';
 import { listBase } from '@/api/pmsProduct/base';
 import usePcdiyStore from '@/store/modules/pcdiy';
 import type { TableInstance } from 'element-plus';
+import { getCustomerProductPage } from '@/api/diy/index';
+import { el } from 'element-plus/es/locale/index.mjs';
 const goodsClassify = ref<any>('');
 const diyStore = usePcdiyStore();
 const showDialog = ref(false);
@@ -111,7 +113,8 @@ const queryParams = reactive({
   itemName: '',
   topCategoryId: '',
   mediumCategoryId: '',
-  bottomCategoryId: ''
+  bottomCategoryId: '',
+  customerId: ''
 });
 const treeProps = {
   value: 'id',
@@ -121,6 +124,7 @@ const treeProps = {
 const props = defineProps<{
   categoryOptions?: any;
   navIndex?: any;
+  clientId?: any;
 }>();
 const onOpen = () => {
   console.log('打开弹窗');
@@ -143,7 +147,12 @@ const handleQuery = () => {
 const getList = async () => {
   loading.value = true;
   try {
-    const res = await listBase(queryParams);
+    if (props.clientId && props.clientId != 'undefined') {
+      queryParams.customerId = props.clientId;
+    } else {
+      delete queryParams.customerId;
+    }
+    const res = props.clientId && props.clientId != 'undefined' ? await getCustomerProductPage(queryParams) : await listBase(queryParams);
     tableData.value = res.rows || [];
     let result = [];
     if (props.navIndex || props.navIndex == 0) {

src/store/modules/pcdiy.ts

@@ -144,37 +144,6 @@ const usePcdiyStore: any = defineStore('pcdiy', {
             id: Date.now()
           }
         ];
-        newItem.advertNum = 0;
-        newItem.advertList = [
-          {
-            imageUrl: '',
-            url: '',
-            imgType: 1,
-            id: Date.now(),
-            show: false
-          },
-          {
-            imageUrl: '',
-            url: '',
-            imgType: 1,
-            id: Date.now(),
-            show: false
-          },
-          {
-            imageUrl: '',
-            url: '',
-            imgType: 1,
-            id: Date.now(),
-            show: false
-          },
-          {
-            imageUrl: '',
-            url: '',
-            imgType: 1,
-            id: Date.now(),
-            show: false
-          }
-        ];
         newItem.realType = 1;
         newItem.realDataType = 1;
         newItem.realNumber = 5;
@@ -810,6 +779,132 @@ const usePcdiyStore: any = defineStore('pcdiy', {
         // 辅助线
         newItem.boxHeight = 1;
         newItem.boxColor = '#000000';
+      } else if (item.id == 18) {
+        // 站点头部
+        newItem.ignore = ['pageBgColor', 'componentBgUrl', 'componentBgColor', 'componentBgColor', 'topRounded', 'bottomRounded', 'marginBoth'];
+        newItem.settings = 1;
+        newItem.carousel = 1;
+        newItem.logo1 = '';
+        newItem.logo2 = '';
+        newItem.code = '';
+        newItem.topType = 1;
+        newItem.topNav = [
+          {
+            title: '导航名称',
+            url: '',
+            id: Date.now()
+          }
+        ];
+        newItem.toplabel = [
+          {
+            title: '标签名称',
+            url: '',
+            id: Date.now()
+          }
+        ];
+
+        newItem.leftStyle = 1;
+        newItem.leftBackground = '#ffffff';
+        newItem.leftColor1 = '#101828';
+        newItem.leftColor2 = '#364153';
+        newItem.carouselType = 1;
+        newItem.carouselRadius = 10;
+        newItem.carouselInterval = 3000;
+        newItem.carouselPosition = 2;
+        newItem.carouselStyleType = 1;
+        newItem.carouselStyleColor = '#ffffff';
+
+        newItem.centreType = 1;
+        newItem.carouselList = [
+          {
+            imageUrl: '',
+            url: '',
+            imgType: 1,
+            show: true,
+            id: Date.now()
+          }
+        ];
+        newItem.advertNum = 0;
+        newItem.advertList = [
+          {
+            imageUrl: '',
+            url: '',
+            imgType: 1,
+            id: Date.now(),
+            show: false
+          },
+          {
+            imageUrl: '',
+            url: '',
+            imgType: 1,
+            id: Date.now(),
+            show: false
+          },
+          {
+            imageUrl: '',
+            url: '',
+            imgType: 1,
+            id: Date.now(),
+            show: false
+          },
+          {
+            imageUrl: '',
+            url: '',
+            imgType: 1,
+            id: Date.now(),
+            show: false
+          }
+        ];
+        newItem.realType = 1;
+        newItem.realDataType = 1;
+        newItem.realNumber = 5;
+        newItem.realIds = [];
+        newItem.navlList = [
+          {
+            imageUrl: '',
+            title: '导航名称',
+            url: '',
+            imgType: 1,
+            id: Date.now()
+          },
+          {
+            imageUrl: '',
+            title: '导航名称',
+            url: '',
+            imgType: 1,
+            id: Date.now()
+          },
+          {
+            imageUrl: '',
+            title: '导航名称',
+            url: '',
+            imgType: 1,
+            id: Date.now()
+          },
+          {
+            imageUrl: '',
+            title: '导航名称',
+            url: '',
+            imgType: 1,
+            id: Date.now()
+          },
+          {
+            imageUrl: '',
+            title: '导航名称',
+            url: '',
+            imgType: 1,
+            id: Date.now()
+          },
+          {
+            imageUrl: '',
+            title: '导航名称',
+            url: '',
+            imgType: 1,
+            id: Date.now()
+          }
+        ];
+        newItem.rightRadius = 5;
+        newItem.login = 1;
       }
 
       this.componentList.push(newItem);

src/views/diy/pcEdit.vue

@@ -44,7 +44,7 @@
             <draggable v-model="diyStore.componentList" item-key="itemKey" class="drag-area" :move="onDragMove">
               <template #item="{ element, index }">
                 <div @click="diyStore.onComponent(element, index)" class="component-bos">
-                  <div class="component-box" :style="{ borderWidth: diyStore.currentIndex == index ? '2px' : '0px' }"></div>
+                  <!-- <div class="component-box" :style="{ borderWidth: diyStore.currentIndex == index ? '2px' : '0px' }"></div> -->
                   <component :is="element.components" :key="element.itemKey" :index="index"></component>
                 </div>
               </template>
@@ -210,7 +210,10 @@ onMounted(() => {
     diyStore.backgroundColor = '#f2f2f2';
     diyStore.hoverColor = '#E7000B';
     if (query.siteId) siteId.value = query.siteId;
-    if (query.clientId) clientId.value = query.clientId;
+    if (query.clientId) {
+      clientId.value = query.clientId;
+      diyStore.clientId = query.clientId;
+    }
   }
   loadComponents();
 });
@@ -226,6 +229,7 @@ const loadComponents = async () => {
         diyStore.backgroundColor = res.data.backgroundColor ? res.data.backgroundColor : '#f2f2f2';
         diyStore.hoverColor = res.data.hoverColor ? res.data.hoverColor : '#E7000B';
         diyStore.currentIndex = -99;
+        if (res.data.clientId) diyStore.clientId = res.data.clientId;
 
         const datas = JSON.parse(res.data.property);
         collapse.value.forEach((item1: any) => {

src/views/diy/pccomponents/edit/goods-edit.vue

@@ -179,7 +179,7 @@
       <!-- 组件样式 -->
       <slot name="style"></slot>
     </div>
-    <goods-dialog ref="goodsDialogRef" :categoryOptions="categoryOptions"></goods-dialog>
+    <goods-dialog ref="goodsDialogRef" :categoryOptions="categoryOptions" :clientId="diyStore.clientId"></goods-dialog>
   </div>
 </template>
 

src/views/diy/pccomponents/edit/head-edit.vue

@@ -107,7 +107,7 @@
             <el-form-item label="样式选择">
               <el-radio-group v-model="diyStore.editComponent.leftStyle">
                 <el-radio :value="1">样式1</el-radio>
-                <!-- <el-radio :value="2">样式2</el-radio> -->
+                <el-radio :value="2">样式2</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-form>

src/views/diy/pccomponents/edit/headData-edit.vue

@@ -0,0 +1,561 @@
+<template>
+  <div class="pc-edit">
+    <!-- 内容 -->
+    <div class="content-wrap" v-show="diyStore.editTab == 'content'">
+      <div class="edit-attr-item-wrap">
+        <h3 class="mb-[10px]">站点头部</h3>
+        <el-form label-width="80px" class="px-[10px]">
+          <el-form-item label="设置">
+            <el-radio-group v-model="diyStore.editComponent.settings" fill="#409eff">
+              <el-radio-button label="顶部" :value="1" />
+              <el-radio-button label="左侧" :value="2" />
+              <el-radio-button label="中间" :value="3" />
+              <el-radio-button label="右侧" :value="4" />
+            </el-radio-group>
+          </el-form-item>
+        </el-form>
+      </div>
+      <template v-if="diyStore.editComponent.settings == 1">
+        <div class="edit-attr-item-wrap">
+          <h3 class="mb-[10px]">顶部设置</h3>
+          <el-form label-width="80px" class="px-[10px]">
+            <el-form-item label="logo1">
+              <div>
+                <upload-image v-model="diyStore.editComponent.logo1" :limit="1" />
+                <div class="annotation">建议尺寸：宽度170px*88px</div>
+              </div>
+            </el-form-item>
+            <el-form-item label="logo2">
+              <div>
+                <upload-image v-model="diyStore.editComponent.logo2" :limit="1" />
+                <div class="annotation">建议尺寸：宽度170px*88px</div>
+              </div>
+            </el-form-item>
+            <el-form-item label="二维码">
+              <div>
+                <upload-image v-model="diyStore.editComponent.code" :limit="1" />
+                <div class="annotation">建议尺寸：宽度100px*100px</div>
+              </div>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="edit-attr-item-wrap">
+          <div class="edit-attr-title flex-row-between">
+            <div>
+              <span>导航栏</span>
+              <span class="title2">鼠标拖拽可以改变顺序</span>
+            </div>
+
+            <el-radio-group v-model="diyStore.editComponent.topType" fill="#409eff">
+              <el-radio-button label="顶部导航" :value="1" />
+              <el-radio-button label="标签" :value="2" />
+            </el-radio-group>
+          </div>
+          <el-form label-width="80px" class="px-[10px]">
+            <template v-if="diyStore.editComponent.topType == 1">
+              <draggable v-model="diyStore.editComponent.topNav" item-key="id">
+                <template #item="{ element, index }">
+                  <div class="edit-attr-box">
+                    <el-icon @click="onDel(1, index)" color="#F56C6C" size="18px" class="circleClose">
+                      <CircleCloseFilled />
+                    </el-icon>
+                    <el-form-item label="导航名称">
+                      <el-input v-model="element.title" placeholder="请输入导航名称" />
+                    </el-form-item>
+                    <el-form-item label="链接地址">
+                      <WebLinkInput v-model="element.url" placeholder="请输入或选择链接" />
+                    </el-form-item>
+                  </div>
+                </template>
+              </draggable>
+              <el-button @click="onAdd(1)" style="width: 100%; margin-top: 10px">新增顶部导航</el-button>
+            </template>
+            <template v-if="diyStore.editComponent.topType == 2">
+              <draggable v-model="diyStore.editComponent.toplabel" item-key="id">
+                <template #item="{ element, index }">
+                  <div class="edit-attr-box">
+                    <el-icon @click="onDel(2, index)" color="#F56C6C" size="18px" class="circleClose">
+                      <CircleCloseFilled />
+                    </el-icon>
+                    <el-form-item label="标签名称">
+                      <el-input v-model="element.title" placeholder="请输入标签名称" />
+                    </el-form-item>
+                    <el-form-item label="链接地址">
+                      <WebLinkInput v-model="element.url" placeholder="请输入或选择链接" />
+                    </el-form-item>
+                  </div>
+                </template>
+              </draggable>
+              <el-button @click="onAdd(2)" style="width: 100%; margin-top: 10px">新增标签</el-button>
+            </template>
+          </el-form>
+        </div>
+      </template>
+      <template v-if="diyStore.editComponent.settings == 2">
+        <div class="edit-attr-item-wrap">
+          <h3 class="mb-[10px]">左侧导航设置</h3>
+          <el-form label-width="80px" class="px-[10px]">
+            <el-form-item label="样式选择">
+              <el-radio-group v-model="diyStore.editComponent.leftStyle">
+                <el-radio :value="1">样式1</el-radio>
+                <el-radio :value="2">样式2</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-form>
+        </div>
+      </template>
+      <template v-if="diyStore.editComponent.settings == 3">
+        <div class="edit-attr-item-wrap">
+          <h3 class="mb-[10px]">中间轮播图</h3>
+          <el-form label-width="80px" class="px-[10px]">
+            <el-form-item label="轮播左右键" label-width="120">
+              <el-radio-group v-model="diyStore.editComponent.carouselType">
+                <el-radio :value="1">圆形</el-radio>
+                <el-radio :value="2">方形</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-form>
+        </div>
+      </template>
+      <template v-if="diyStore.editComponent.settings == 4">
+        <div class="edit-attr-item-wrap">
+          <h3 class="mb-[10px]">右侧设置</h3>
+          <el-form label-width="80px" class="px-[10px]">
+            <el-form-item label="登录状态">
+              <el-radio-group v-model="diyStore.editComponent.login">
+                <el-radio :value="1">未登录</el-radio>
+                <el-radio :value="2">已登录</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <!-- <el-form-item label="资讯位置">
+              <el-radio-group v-model="diyStore.editComponent.realType">
+                <el-radio :value="1">在上</el-radio>
+                <el-radio :value="2">在下</el-radio>
+              </el-radio-group>
+            </el-form-item> -->
+            <el-form-item label="数据来源">
+              <el-radio-group v-model="diyStore.editComponent.realDataType">
+                <el-radio :value="1">默认</el-radio>
+                <el-radio :value="2">手动</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="文章数量" v-if="diyStore.editComponent.realDataType == 1">
+              <el-slider v-model="diyStore.editComponent.realNumber" show-input :min="1" :max="5" />
+            </el-form-item>
+            <el-form-item label="手动选择" v-else>
+              <div class="data-num" @click="openDialog">
+                <span v-if="diyStore.editComponent.realIds.length == 0">请选择</span>
+                <span v-else>已选择{{ diyStore.editComponent.realIds.length }}个</span>
+                <el-icon><ArrowRight /></el-icon>
+              </div>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="edit-attr-item-wrap">
+          <div class="edit-attr-title flex-row-between">
+            <div>
+              <span>导航设置</span>
+              <span class="title2">鼠标拖拽可以改变顺序</span>
+            </div>
+          </div>
+          <el-form label-width="80px" class="px-[10px]">
+            <draggable v-model="diyStore.editComponent.navlList" item-key="id">
+              <template #item="{ element, index }">
+                <div class="edit-attr-box">
+                  <el-icon @click="onDel(4, index)" color="#F56C6C" size="18px" class="circleClose">
+                    <CircleCloseFilled />
+                  </el-icon>
+                  <el-form-item label="图片上传">
+                    <div class="flex-row-start">
+                      <upload-image v-model="element.imageUrl" :limit="1" />
+                      <div class="flex-column-between images-bos">
+                        <div class="annotation3">(建议上传尺寸相同图片，推荐尺寸150*150)</div>
+                        <div class="flex-row-between images-box">
+                          <div>缩放模式</div>
+                          <div class="flex-row-start" @click="openImageType(element, 3)">
+                            <span style="margin-top: 2px" class="text-primary flex-1 cursor-pointer">{{
+                              element.imgType == 1 ? '拉伸' : element.imgType == 2 ? '缩放' : '填充'
+                            }}</span>
+                            <el-icon class="cursor-pointer">
+                              <ArrowRight />
+                            </el-icon>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </el-form-item>
+                  <el-form-item label="标签名称">
+                    <el-input v-model="element.title" placeholder="请输入标签名称" :maxlength="4" show-word-limit />
+                  </el-form-item>
+                  <el-form-item label="链接地址">
+                    <WebLinkInput v-model="element.url" placeholder="请输入或选择链接" />
+                  </el-form-item>
+                </div>
+              </template>
+            </draggable>
+            <el-button @click="onAdd(4)" style="width: 100%; margin-top: 10px">新增导航</el-button>
+          </el-form>
+        </div>
+      </template>
+    </div>
+    <!-- 样式 -->
+    <div class="style-wrap" v-show="diyStore.editTab == 'style'">
+      <div class="edit-attr-item-wrap">
+        <h3 class="mb-[10px]">轮播区域设置</h3>
+        <el-form label-width="80px" class="px-[10px]">
+          <el-form-item label="切换间隔ms" label-width="100px">
+            <el-slider v-model="diyStore.editComponent.carouselInterval" show-input :min="1000" :max="6000" />
+          </el-form-item>
+          <el-form-item label="图片圆角">
+            <el-slider v-model="diyStore.editComponent.carouselRadius" show-input :min="0" :max="100" />
+          </el-form-item>
+          <el-form-item label="样式">
+            <el-radio-group v-model="diyStore.editComponent.carouselStyleType">
+              <el-radio :value="1">直线</el-radio>
+              <el-radio :value="2">圆点</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="位置">
+            <el-radio-group v-model="diyStore.editComponent.carouselPosition">
+              <el-radio :value="1">居左</el-radio>
+              <el-radio :value="2">居中</el-radio>
+              <el-radio :value="3">居右</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="颜色">
+            <span class="mr-[10px]">{{ diyStore.editComponent.carouselStyleColor }}</span>
+            <el-color-picker class="mr-[10px]" v-model="diyStore.editComponent.carouselStyleColor" />
+            <el-button @click="diyStore.editComponent.carouselStyleColor = '#ffffff'" size="small">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="edit-attr-item-wrap">
+        <h3 class="mb-[10px]">左侧区域设置</h3>
+        <el-form class="px-[10px]">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="主文字颜色">
+                <el-color-picker v-model="diyStore.editComponent.leftColor1" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="背景颜色">
+                <el-color-picker v-model="diyStore.editComponent.leftBackground" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="副文字颜色">
+                <el-color-picker v-model="diyStore.editComponent.leftColor2" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <div class="edit-attr-item-wrap">
+        <h3 class="mb-[10px]">右侧区域导航</h3>
+        <el-form label-width="80px" class="px-[10px]">
+          <el-form-item label="图片圆角">
+            <el-slider v-model="diyStore.editComponent.rightRadius" show-input :min="0" :max="50" />
+          </el-form-item>
+        </el-form>
+      </div>
+      <!-- 组件样式 -->
+      <slot name="style"></slot>
+    </div>
+    <ImagesForm ref="ImagesFormRef" @confirmCallBack="confirmCallBack"></ImagesForm>
+
+    <!-- 手动选择 -->
+    <el-dialog v-model="showDialog" title="选择资讯">
+      <div class="data-bos">
+        <el-input v-model="queryParams.announcementTitle" placeholder="请输入资讯标题" clearable style="width: 300px; margin-bottom: 10px">
+          <template #append>
+            <el-button @click="handleQuery" :icon="Search" />
+          </template>
+        </el-input>
+        <el-table ref="multipleTableRef" v-loading="loading" :data="tableData" border @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" />
+          <el-table-column label="标题" prop="announcementTitle" align="center" min-width="200" show-overflow-tooltip />
+          <el-table-column label="发布时间" align="center" prop="createTime" width="180" />
+        </el-table>
+        <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList">
+          <template #slotDiv>
+            <div class="selected">已选择 {{ multipleSelection.length }} 个</div>
+          </template>
+        </pagination>
+      </div>
+
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="showDialog = false">取消</el-button>
+          <el-button type="primary" @click="onConfirm">确认</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Index" lang="ts">
+import draggable from 'vuedraggable';
+import usePcdiyStore from '@/store/modules/pcdiy';
+import uploadImage from '@/components/upload-image/index.vue';
+import ImagesForm from '@/components/ImagesForm/index.vue';
+import { listAnnouncement } from '@/api/system/announcement';
+import type { TableInstance } from 'element-plus';
+import { Search } from '@element-plus/icons-vue';
+const diyStore = usePcdiyStore();
+const ImagesFormRef = ref();
+const multipleTableRef = ref<TableInstance>();
+const showDialog = ref(false);
+const loading = ref(false);
+const tableData = ref<any[]>([]);
+const multipleSelection: any = ref([]); // 选中数据
+const total = ref(0);
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  announcementTitle: ''
+});
+const resultList = ref<any>([]); //单页之前被选中的数据
+
+const onAdd = (res: any) => {
+  if (res == 1) {
+    //顶部导航
+    diyStore.editComponent.topNav.push({
+      title: '',
+      url: ''
+    });
+  } else if (res == 2) {
+    //标签
+    diyStore.editComponent.toplabel.push({
+      title: '',
+      url: ''
+    });
+  } else if (res == 3) {
+    //轮播图
+    diyStore.editComponent.carouselList.push({
+      imageUrl: '',
+      url: '',
+      imgType: 1,
+      show: true,
+      id: Date.now()
+    });
+  } else if (res == 4) {
+    //导航
+    diyStore.editComponent.navlList.push({
+      imageUrl: '',
+      title: '',
+      url: '',
+      imgType: 1,
+      id: Date.now()
+    });
+  }
+};
+
+const onDel = (res: any, index: any) => {
+  if (res == 1) {
+    //顶部导航
+    diyStore.editComponent.topNav.splice(index, 1);
+  } else if (res == 2) {
+    //标签
+    diyStore.editComponent.toplabel.splice(index, 1);
+  } else if (res == 3) {
+    //轮播图
+    diyStore.editComponent.carouselList.splice(index, 1);
+  } else if (res == 4) {
+    //导航
+    diyStore.editComponent.navlList.splice(index, 1);
+  }
+};
+
+const onAdvertNum = (res: any) => {
+  diyStore.editComponent.advertList.forEach((item: any, index: any) => {
+    item.show = false;
+    if (index < res) {
+      item.show = true;
+    }
+  });
+};
+
+// 打开图片类型
+const openImageType = (element: any, type: any) => {
+  const datas = JSON.parse(JSON.stringify(element));
+  ImagesFormRef.value.onOpen(datas, type);
+};
+
+// 图片类型返回
+const confirmCallBack = (res: any, type: any) => {
+  let list = [];
+  if (type == 1) list = diyStore.editComponent.carouselList;
+  if (type == 2) list = diyStore.editComponent.advertList;
+  if (type == 3) list = diyStore.editComponent.navlList;
+  list.forEach((item: any) => {
+    if (item.id == res.id) {
+      item.imgType = res.imgType;
+    }
+  });
+};
+
+/** 搜索 */
+const handleQuery = () => {
+  queryParams.pageNum = 1;
+  getList();
+};
+
+/** 获取列表 */
+const getList = async () => {
+  loading.value = true;
+  try {
+    const res = await listAnnouncement(queryParams);
+    tableData.value = res.rows || [];
+    const result = tableData.value.filter((item: any) => diyStore.editComponent.realIds.includes(item.id));
+    resultList.value = result;
+    nextTick(() => {
+      result.forEach((item: any) => {
+        multipleTableRef.value?.toggleRowSelection(item, true);
+      });
+    });
+
+    console.log('result', result);
+    total.value = res.total || 0;
+  } finally {
+    loading.value = false;
+  }
+};
+
+//打开弹窗
+const openDialog = () => {
+  showDialog.value = true;
+  getList();
+};
+
+// 监听表格单行选中
+const handleSelectionChange = (val: []) => {
+  multipleSelection.value = val;
+};
+//确定
+const onConfirm = () => {
+  const newIds = calculateNewIds(diyStore.editComponent.realIds, tableData.value, multipleSelection.value);
+  diyStore.editComponent.realIds = newIds;
+  showDialog.value = false;
+};
+const calculateNewIds = (cacheIds: any, allPageItems: any, selectedItems: any) => {
+  // 1. 获取当前页所有存在的 ID 集合 (用于识别哪些旧数据属于当前页)
+  const currentPageIdSet = new Set(allPageItems.map((item) => item.id));
+  // 2. 获取最终选中项的 ID 集合
+  const selectedIdSet = new Set(selectedItems.map((item) => item.id));
+  // 3. 过滤旧的缓存 IDs
+  const retainedOldIds = cacheIds.filter((id) => {
+    // 情况 A: 该 ID 不在当前页数据中 (说明是其他页的数据，必须无条件保留)
+    if (!currentPageIdSet.has(id)) {
+      return true;
+    }
+    // 情况 B: 该 ID 在当前页数据中，且也在最终选中列表中 (说明用户保持了选中)
+    if (selectedIdSet.has(id)) {
+      return true;
+    }
+    // 情况 C: 该 ID 在当前页数据中，但不在最终选中列表中 (说明用户取消了选中，如 ID 4)
+    // 返回 false，将其剔除
+    return false;
+  });
+  // 4. 合并：保留的旧数据 + 当前页新选中的数据
+  // 使用 Set 去重，虽然逻辑上 retainedOldIds 和 selectedIdSet 不会有交集，但以防万一
+  const newIdsSet = new Set([...retainedOldIds, ...selectedIdSet]);
+  // 转回数组 (如果需要保持原有顺序或特定排序，可以在此处调整)
+  // 这里简单转为数组，通常建议按数字大小排序以便阅读，或者保持插入顺序
+  return Array.from(newIdsSet).sort((a, b) => a - b);
+};
+</script>
+
+<style lang="scss" scoped>
+.pc-edit {
+  .edit-attr-item-wrap {
+    border-top: 2px solid var(--el-color-info-light-8);
+    padding-top: 20px;
+
+    &:first-of-type {
+      border-top: none;
+      padding-top: 0;
+    }
+
+    .edit-attr-title {
+      display: flex;
+
+      .title2 {
+        font-size: 12px;
+        color: #666;
+        margin-left: 6px;
+      }
+    }
+
+    .data-num {
+      width: 100%;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      color: var(--el-color-primary);
+      cursor: pointer;
+    }
+
+    .edit-attr-box {
+      padding: 18px 10px 0 10px;
+      border: 1px solid #e5e6eb;
+      border-radius: 4px;
+      position: relative;
+      margin-top: 18px;
+
+      .images-bos {
+        flex: 1;
+        height: 98px;
+        padding: 5px 0;
+      }
+
+      .images-box {
+        font-size: 13px;
+        color: #666;
+      }
+
+      .circleClose {
+        position: absolute;
+        top: -9px;
+        right: -9px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .annotation {
+    // position: absolute;
+    // bottom: 0;
+    // left: 0;
+    font-size: 12px;
+    color: #666;
+  }
+
+  .annotation2 {
+    font-size: 12px;
+    color: #666;
+    margin-left: 10px;
+  }
+
+  .annotation3 {
+    font-size: 12px;
+    color: #666;
+    line-height: 14px;
+  }
+
+  .selected {
+    line-height: 32px;
+    position: absolute;
+    left: 0px;
+  }
+
+  :deep(.el-form-item__label) {
+    font-weight: 400;
+  }
+
+  :deep(.file-selector) {
+    display: none;
+  }
+}
+</style>

src/views/diy/pccomponents/index.ts

@@ -6,6 +6,11 @@ const headRef = shallowRef(head);
 import headEdit from './edit/head-edit.vue';
 const headEditRef = shallowRef(headEdit);
 
+import headData from './pages/headData.vue';
+const headDataRef = shallowRef(headData);
+import headDataEdit from './edit/headData-edit.vue';
+const headDataEditRef = shallowRef(headDataEdit);
+
 import textTitle from './pages/textTitle.vue';
 const textTitleRef = shallowRef(textTitle);
 import textTitleEdit from './edit/textTitle-edit.vue';
@@ -97,6 +102,15 @@ export const componentImportConfigs: any = [
     edit: markRaw(headEditRef.value),
     fid: 1
   },
+  {
+    name: '站点头部',
+    icon: 'iconfont iconfuwenbenpc',
+    id: 18,
+    enabled: true,
+    components: markRaw(headDataRef.value),
+    edit: markRaw(headDataEditRef.value),
+    fid: 1
+  },
   {
     name: '文本标题',
     icon: 'iconfont iconbiaotipc',

src/views/diy/pccomponents/pages/head.vue

@@ -843,23 +843,6 @@ const warpCss = computed(() => {
         display: flex;
         flex-direction: column;
         font-size: 14px;
-        .order-bos {
-          width: calc(100% - 20px);
-          height: 110px;
-          font-size: 14px;
-          padding: 16px 0;
-          border-bottom: 1px solid #e5e7eb;
-          margin: 0 10px;
-          img {
-            width: 28px;
-            height: 28px;
-          }
-          .order-num {
-            color: #e7000b;
-            font-size: 14px;
-            margin-top: 2px;
-          }
-        }
 
         .login-bos {
           width: calc(100% - 20px);

src/views/diy/pccomponents/pages/headData.vue

@@ -0,0 +1,927 @@
+<template>
+  <div class="head-all" :style="warpCss">
+    <!-- 搜索组件 -->
+    <div class="search-bos">
+      <div class="search-content">
+        <img class="logo mt-[10px]" :src="componentData.logo1 ? componentData.logo1 : logo1" alt="" />
+        <img class="logo mt-[20px]" :src="componentData.logo2 ? componentData.logo2 : logo3" alt="" />
+        <div class="search-box">
+          <div class="search-div flex-row-start">
+            <div class="search-input flex-row-center">
+              <el-input class="el-input" readonly placeholder="搜索商品、品牌、分类..." />
+              <div class="bnt flex-row-center">
+                <el-icon color="#ffffff" size="20">
+                  <Search />
+                </el-icon>
+              </div>
+            </div>
+
+            <div class="cat-bos flex-row-center">
+              <el-badge :value="5">
+                <img src="@/assets/images/pcdiy/layout4.png" alt="" />
+              </el-badge>
+              <span class="ml-[15px]">我的购物车</span>
+            </div>
+          </div>
+          <div class="search-text">
+            <div v-for="(item, index) in componentData.toplabel" :key="index">{{ item.title }}</div>
+          </div>
+        </div>
+        <img class="code" :src="componentData.code ? componentData.code : code" alt="" />
+      </div>
+    </div>
+    <!-- 分类 -->
+    <div class="nav-pages">
+      <div class="nav-bos">
+        <div v-for="(item, index) in componentData.topNav" :key="index" class="nav-list" :class="index == 0 ? 'hig' : ''">
+          {{ item.title }}
+        </div>
+      </div>
+    </div>
+
+    <!--  头部 -->
+    <div class="head-pages">
+      <div class="home-head">
+        <div
+          class="classify"
+          v-if="componentData.leftStyle == 1"
+          :style="{
+            backgroundColor: componentData.leftBackground
+          }"
+        >
+          <div class="classify-list" v-for="(item, index) in classifyList" :key="index">
+            <div :style="{ 'color': componentData.leftColor1 }" class="label ellipsis hover-color">{{ item.label }}</div>
+            <div :style="{ 'color': componentData.leftColor2 }" class="info info1 ellipsis hover-color">{{ item.oneLable1 }}</div>
+            <div :style="{ 'color': componentData.leftColor2 }" class="info ellipsis hover-color">{{ item.oneLable2 }}</div>
+          </div>
+        </div>
+        <div class="classify2" v-else>
+          <div class="classify-list" v-for="(item, index) in classifyList2" :key="index">
+            <div class="label ellipsis">{{ item.label }}</div>
+            <div class="two-level">
+              <template v-for="(item1, index1) in item.children" :key="index1">
+                <div class="two-hig" v-if="Number(index1) < 2">{{ item1.label }}</div>
+                <div style="margin: 0 4px" v-if="index1 == 0 && item.children.length > 1">/</div>
+              </template>
+            </div>
+          </div>
+        </div>
+        <div class="head-bos">
+          <div
+            class="carousel"
+            :class="[
+              { 'carousel-type': componentData.carouselType == 2 },
+              'position' + componentData.carouselPosition,
+              'styleType' + componentData.carouselStyleType
+            ]"
+            :style="{
+              height: componentData.advertNum == 0 ? '540px' : '400px',
+              borderRadius: componentData.carouselRadius + 'px'
+            }"
+          >
+            <el-carousel :height="componentData.advertNum == 0 ? '540px' : '400px'" arrow="always">
+              <template v-if="componentData.carouselList && componentData.carouselList.length > 0">
+                <el-carousel-item v-for="item in componentData.carouselList" :key="item">
+                  <el-image
+                    style="width: 100%; height: 100%"
+                    :src="item.imageUrl ? item.imageUrl : figure"
+                    :fit="item.imgType == 1 ? 'fill' : item.imgType == 2 ? 'contain' : 'cover'"
+                  />
+                </el-carousel-item>
+              </template>
+              <template v-else>
+                <el-carousel-item>
+                  <el-image style="width: 100%; height: 100%" :src="figure" fit="cover" />
+                </el-carousel-item>
+              </template>
+            </el-carousel>
+          </div>
+        </div>
+        <!-- 右边 -->
+        <div
+          class="head-right"
+          :style="{
+            borderRadius: componentData.rightRadius + 'px'
+          }"
+        >
+          <div v-if="componentData.login == 2" class="login-bos flex-column-between">
+            <div class="login-box">
+              <img :src="logo2" alt="" />
+              <div class="flex-1 w-[0px]">
+                <div class="login1 ellipsis">用户昵称</div>
+                <div class="login2 ellipsis">中国南方电网有限责任公司中国南方电网有限责任公司</div>
+              </div>
+            </div>
+            <div class="login-num">
+              <div class="flex-row-between">
+                <div>企业余额：¥40,736,173,69</div>
+                <el-icon>
+                  <ArrowRight />
+                </el-icon>
+              </div>
+              <div class="flex-row-between mt-[6px]">
+                <div>可用额度：¥40,736,173,69</div>
+                <el-icon>
+                  <ArrowRight />
+                </el-icon>
+              </div>
+            </div>
+          </div>
+          <div class="login-bos" v-else>
+            <div class="login-box">
+              <img :src="logo2" alt="" />
+              <div>
+                <div class="login1">您好,欢迎来到优易达</div>
+                <div class="login2">请先登录</div>
+              </div>
+            </div>
+            <div class="loginBtn-bos flex-row-center">
+              <div class="login-bnt1 flex-row-center">登录</div>
+              <div class="login-bnt2 flex-row-center">注册</div>
+            </div>
+          </div>
+          <div class="interests">
+            <div class="interests-bos">
+              <div v-for="(item, index) in componentData.navlList" :key="index" class="interests-item flex-column-center">
+                <el-image
+                  class="img"
+                  :src="item.imageUrl ? item.imageUrl : figure"
+                  :fit="item.imgType == 1 ? 'fill' : item.imgType == 2 ? 'contain' : 'cover'"
+                />
+                <div style="height: 18px" class="hover-color">{{ item.title }}</div>
+              </div>
+            </div>
+          </div>
+          <div class="real-time">
+            <div class="real-title flex-row-between">
+              <div class="real1">优易资讯</div>
+              <div class="real2 flex-row-start">
+                <div>更多</div>
+                <el-icon :size="13" color="#83899F">
+                  <ArrowRight />
+                </el-icon>
+              </div>
+            </div>
+            <div class="real-box">
+              <template v-for="(item, index) in realList" :key="index">
+                <div class="real-list ellipsis" v-if="componentData.realDataType == 2 ? true : Number(index) < componentData.realNumber">
+                  {{ item.announcementTitle }}
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="Index" lang="ts">
+import figure from '@/assets/images/figure.png';
+import logo1 from '@/assets/images/pcdiy/logo1.png';
+import logo2 from '@/assets/images/pcdiy/logo2.png';
+import logo3 from '@/assets/images/pcdiy/logo3.png';
+import code from '@/assets/images/pcdiy/code.png';
+import usePcdiyStore from '@/store/modules/pcdiy';
+import { listAnnouncement } from '@/api/system/announcement';
+const diyStore = usePcdiyStore();
+const props = defineProps<{
+  index: number; // 确保声明 index 为可选属性
+  row?: any;
+}>();
+const componentData = props.row ? props.row : diyStore.componentList[props.index];
+document.documentElement.style.setProperty('--carousel-color', componentData.carouselStyleColor ? componentData.carouselStyleColor : '#ffffff');
+onMounted(() => {
+  getDataList();
+});
+
+const getDataList = () => {
+  realList.value = [];
+  // 默认
+  if (componentData.realDataType == 1) {
+    listAnnouncement({ pageSize: 20 }).then((res) => {
+      if (res.code == 200) {
+        realList.value = res.rows;
+      }
+    });
+  } else {
+    //手动选择
+    listAnnouncement({ pageSize: 20, ids: componentData.realIds.join(',') }).then((res) => {
+      if (res.code == 200) {
+        const result = res.rows.filter((item: any) => componentData.realIds.includes(item.id));
+        realList.value = result;
+        console.log('result', result);
+      }
+    });
+  }
+};
+
+// 监听 componentData 变化，重新请求数据
+watch(
+  () => componentData.realDataType,
+  () => {
+    getDataList();
+  }
+);
+
+watch(
+  () => componentData.realIds,
+  () => {
+    getDataList();
+  },
+  { deep: true } // 5. 数组变化需要 deep 监听
+);
+
+watch(
+  () => componentData.carouselStyleColor,
+  () => {
+    document.documentElement.style.setProperty('--carousel-color', componentData.carouselStyleColor ? componentData.carouselStyleColor : '#ffffff');
+  }
+);
+
+//左侧分类
+const classifyList = ref<any>([
+  {
+    id: 12792,
+    label: '电脑/外设产品',
+    oneLable1: '联想',
+    oneLable2: '华硕'
+  },
+  {
+    id: 12792,
+    label: '通讯/数码智能',
+    oneLable1: '华为',
+    oneLable2: '罗技'
+  },
+  {
+    id: 12854,
+    label: '办公设备',
+    oneLable1: '惠普',
+    oneLable2: 'MAXHUB'
+  },
+  {
+    id: 12962,
+    label: '办公耗品',
+    oneLable1: '奔图',
+    oneLable2: '莱盛'
+  },
+  {
+    id: 14184,
+    label: '文具用品',
+    oneLable1: '齐心',
+    oneLable2: '得力'
+  },
+  {
+    id: 13162,
+    label: '个护清洁',
+    oneLable1: '洁柔',
+    oneLable2: '宝洁'
+  },
+  {
+    id: 13164,
+    label: '清洁纸品',
+    oneLable1: '洁柔',
+    oneLable2: '宝洁'
+  },
+  {
+    id: 12716,
+    label: '食品饮料',
+    oneLable1: '金龙鱼',
+    oneLable2: '贝蒂斯'
+  },
+  {
+    id: 13320,
+    label: '家居日用',
+    oneLable1: '膳魔师',
+    oneLable2: '博洋'
+  },
+  {
+    id: 13420,
+    label: '运动户外',
+    oneLable1: '红双喜',
+    oneLable2: '捷瑞特'
+  },
+  {
+    id: 13054,
+    label: '家用电器',
+    oneLable1: '摩飞',
+    oneLable2: '小熊'
+  },
+  {
+    id: 13478,
+    label: '家具用品',
+    oneLable1: '科飞亚',
+    oneLable2: '全能'
+  },
+  {
+    id: 13530,
+    label: '工业用品',
+    oneLable1: '代尔塔',
+    oneLable2: '宝工'
+  }
+]);
+//左侧分类
+const classifyList2 = ref<any>([
+  {
+    id: 12792,
+    label: '电脑/外设产品',
+    children: [
+      {
+        label: '电脑整机'
+      },
+      {
+        label: '电脑外设'
+      }
+    ]
+  },
+  {
+    id: 12792,
+    label: '电气控制及工业自动化',
+    children: [
+      {
+        label: '配电及控制电器'
+      },
+      {
+        label: '电气辅材'
+      }
+    ]
+  },
+  {
+    id: 12854,
+    label: '手工具、动力工具及耗材',
+    children: [
+      {
+        label: '防爆工具'
+      },
+      {
+        label: '钳工工具'
+      }
+    ]
+  },
+  {
+    id: 12962,
+    label: '气动、液压、泵、管阀',
+    children: [
+      {
+        label: '气源处理元件'
+      },
+      {
+        label: '气动控制元件'
+      }
+    ]
+  },
+  {
+    id: 14184,
+    label: '轴承、传动、通用设备',
+    children: [
+      {
+        label: '轴承及其工具'
+      },
+      {
+        label: '皮带'
+      }
+    ]
+  },
+  {
+    id: 13162,
+    label: '刀具、量具、磨具、仪表',
+    children: [
+      {
+        label: '刃具'
+      },
+      {
+        label: '刀具智能系统'
+      }
+    ]
+  },
+  {
+    id: 13164,
+    label: '紧固、密封、建工材料',
+    children: [
+      {
+        label: '螺栓'
+      },
+      {
+        label: '组合件'
+      }
+    ]
+  },
+  {
+    id: 12716,
+    label: '搬运、存储、包材',
+    children: [
+      {
+        label: '智能仓储设备'
+      },
+      {
+        label: '搬运堆高设备'
+      }
+    ]
+  }
+]);
+const realList = ref<any>([]);
+
+const warpCss = computed(() => {
+  let style = '';
+  style += 'position:relative;';
+  //边距
+  if (componentData.padding) {
+    if (componentData.padding.top > 0) {
+      style += 'padding-top:' + componentData.padding.top + 'px' + ';';
+    }
+    if (componentData.padding.bottom > 0) {
+      style += 'padding-bottom:' + componentData.padding.bottom + 'px' + ';';
+    }
+    style += 'padding-right:' + componentData.padding.both + 'px' + ';';
+    style += 'padding-left:' + componentData.padding.both + 'px' + ';';
+  }
+  //间距
+  if (componentData.margin) {
+    if (componentData.margin.top > 0) {
+      style += 'margin-top:' + componentData.margin.top + 'px' + ';';
+    }
+    if (componentData.margin.bottom > 0) {
+      style += 'margin-bottom:' + componentData.margin.bottom + 'px' + ';';
+    }
+  }
+
+  return style;
+});
+</script>
+
+<style lang="scss" scoped>
+.head-all {
+  width: 100%;
+
+  // 搜索栏
+  .search-bos {
+    width: 100%;
+
+    .search-content {
+      margin: 0 auto;
+      width: 1200px;
+      display: flex;
+      padding: 0 30px;
+    }
+
+    .logo {
+      width: 170px;
+      height: 88px;
+      border-radius: 4px;
+      margin-right: 30px;
+    }
+
+    .search-box {
+      flex: 1;
+      height: 88px;
+      padding-top: 40px;
+
+      .search-div {
+        .search-input {
+          flex: 1;
+          height: 38px;
+          border-radius: 3px;
+          border: 2px solid #fb2c36;
+          padding-right: 4px;
+          font-size: 14px;
+
+          .el-input {
+            height: 30px;
+            width: 100%;
+            font-size: 16px;
+
+            :deep(.el-input__wrapper) {
+              border: none;
+              /* 可选：去除聚焦时的高亮 */
+              box-shadow: none;
+              outline: none;
+            }
+          }
+
+          .bnt {
+            width: 50px;
+            height: 30px;
+            background: #e7000b;
+            border-radius: 3px;
+            font-weight: bold;
+            cursor: pointer;
+          }
+        }
+
+        .cat-bos {
+          width: 143px;
+          height: 38px;
+          background: #ffffff;
+          border-radius: 10px;
+          border: 1px solid #e5e7eb;
+          margin-left: 24px;
+          font-size: 14px;
+          color: #e7000b;
+          cursor: pointer;
+
+          img {
+            width: 14px;
+            height: 14px;
+            margin-top: 2px;
+          }
+        }
+      }
+
+      .search-text {
+        font-size: 12px;
+        color: #e7000b;
+        display: flex;
+        margin-top: 4px;
+
+        div {
+          margin-left: 10px;
+        }
+      }
+    }
+
+    .code {
+      height: 90px;
+      width: 90px;
+      margin-top: 10px;
+      margin-left: 70px;
+      // border-radius: 4px;
+    }
+  }
+
+  //分类
+  .nav-pages {
+    width: 100%;
+
+    .nav-bos {
+      margin: 0 auto;
+      width: 1200px;
+      display: flex;
+      position: relative;
+      background: #f9fafb;
+      border-radius: 5px 5px 0px 0px;
+      border: 1px solid #e5e7eb;
+      height: 48px;
+
+      .nav-list {
+        line-height: 48px;
+        font-size: 15px;
+        color: #364153;
+        margin: 0 16px;
+        text-align: center;
+        cursor: pointer;
+
+        &.hig {
+          color: #e7000b;
+          position: relative;
+        }
+
+        &:hover {
+          color: #e7000b;
+        }
+      }
+    }
+  }
+
+  // 头部
+  .head-pages {
+    width: 100%;
+    margin: 0 auto;
+    position: relative;
+
+    .home-head {
+      width: 1200px;
+      display: flex;
+      gap: 0px 10px;
+      margin: 0px auto 0 auto;
+      background-color: #ffffff;
+
+      .classify {
+        width: 234px;
+        height: 540px;
+        background: #ffffff;
+        border-radius: 5px;
+        padding: 10px 0;
+
+        .classify-list {
+          width: 100%;
+          height: 40px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          padding-left: 15px;
+          position: relative;
+
+          .label {
+            max-width: 100px;
+            font-weight: 600;
+            font-size: 14px;
+            color: #101828;
+            white-space: nowrap;
+            margin-right: 10px;
+
+            &:hover {
+              color: #e7000b;
+            }
+          }
+
+          .info {
+            max-width: 60px;
+            font-size: 12px;
+            color: #364153;
+            white-space: nowrap;
+
+            &.info1 {
+              margin-right: 6px;
+            }
+
+            &:hover {
+              color: #e7000b;
+            }
+          }
+
+          .classify-border {
+            position: absolute;
+            right: -1px;
+            top: 0px;
+            width: 1px;
+            height: 38px;
+            background-color: #ffffff;
+            z-index: 2;
+          }
+        }
+      }
+
+      .classify2 {
+        width: 234px;
+        height: 540px;
+        background: #ffffff;
+        padding: 10px 0px;
+
+        .classify-list {
+          width: 100%;
+          height: 60px;
+          cursor: pointer;
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding-left: 25px;
+
+          &.classify-hig {
+            border: 1px solid var(--el-color-primary);
+            border-right: 0px solid var(--el-color-primary);
+          }
+
+          .label {
+            width: 100%;
+            font-size: 14px;
+            color: #101828;
+            white-space: nowrap;
+            margin-right: 10px;
+            font-weight: 600;
+
+            &:hover {
+              color: var(--el-color-primary);
+            }
+          }
+
+          .two-level {
+            display: flex;
+            align-items: center;
+            font-size: 12px;
+            color: #364153;
+            margin-top: 6px;
+
+            .two-hig {
+              &:hover {
+                color: var(--el-color-primary);
+              }
+            }
+          }
+        }
+      }
+
+      // 头部中间
+      .head-bos {
+        flex: 1;
+        padding: 10px 0;
+
+        .carousel {
+          overflow: hidden;
+          width: 100%;
+          background: #ffffff;
+          cursor: pointer;
+
+          :deep(.el-carousel__button) {
+            background-color: var(--carousel-color);
+          }
+
+          &.carousel-type {
+            :deep(.el-carousel__arrow) {
+              border-radius: 0;
+            }
+          }
+
+          &.position1 {
+            :deep(.el-carousel__indicators--horizontal) {
+              left: 5%;
+            }
+          }
+          &.position2 {
+            :deep(.el-carousel__indicators--horizontal) {
+              left: 50%;
+            }
+          }
+          &.position3 {
+            :deep(.el-carousel__indicators--horizontal) {
+              left: 95%;
+            }
+          }
+          &.styleType2 {
+            :deep(.el-carousel__button) {
+              height: 10px;
+              width: 10px;
+              border-radius: 10px;
+            }
+          }
+        }
+      }
+
+      //右边
+      .head-right {
+        width: 240px;
+        height: 540px;
+        background: #ffffff;
+        display: flex;
+        flex-direction: column;
+        font-size: 14px;
+        .order-bos {
+          width: calc(100% - 20px);
+          height: 110px;
+          font-size: 14px;
+          padding: 16px 0;
+          border-bottom: 1px solid #e5e7eb;
+          margin: 0 10px;
+          img {
+            width: 28px;
+            height: 28px;
+          }
+          .order-num {
+            color: #e7000b;
+            font-size: 14px;
+            margin-top: 2px;
+          }
+        }
+
+        .login-bos {
+          width: calc(100% - 20px);
+          min-height: 110px;
+          border-bottom: 1px solid #e5e7eb;
+          margin: 0 10px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          padding: 16px 0;
+
+          .login-box {
+            display: flex;
+            align-items: center;
+            width: 100%;
+
+            img {
+              width: 40px;
+              height: 40px;
+              margin-right: 8px;
+              border-radius: 40px;
+            }
+
+            .login1 {
+              font-size: 13px;
+              color: #444444;
+            }
+
+            .login2 {
+              margin-top: 2px;
+              font-size: 12px;
+              color: #6a7282;
+            }
+          }
+
+          .login-num {
+            width: 100%;
+            background: linear-gradient(90deg, #f2d4c3 0%, #ffe3d2 100%);
+            border-radius: 4px 4px 4px 4px;
+            font-size: 12px;
+            color: #542a12;
+            padding: 5px 10px;
+            margin-top: 10px;
+          }
+
+          .loginBtn-bos {
+            width: 100%;
+
+            .login-bnt1 {
+              width: 64px;
+              height: 24px;
+              background-color: #e7000b;
+              color: #ffffff;
+              border-radius: 24px;
+              font-size: 12px;
+              cursor: pointer;
+            }
+
+            .login-bnt2 {
+              width: 64px;
+              height: 24px;
+              border: 1px solid #e7000b;
+              color: #e7000b;
+              border-radius: 24px;
+              font-size: 12px;
+              margin-left: 10px;
+              cursor: pointer;
+            }
+          }
+        }
+
+        .real-time {
+          width: calc(100% - 20px);
+          height: 227px;
+          border-bottom: 1px solid #e5e7eb;
+          margin: 0 10px;
+          background: linear-gradient(0deg, #ffece8 0%, #ffffff 100%);
+          border-radius: 6px 6px 6px 6px;
+          border-top: 1px solid #ff0036;
+          padding: 10px;
+
+          .real-title {
+            position: relative;
+            margin-bottom: 5px;
+
+            .real1 {
+              font-weight: 600;
+              font-size: 14px;
+              color: #f53f3f;
+            }
+
+            .real2 {
+              font-size: 13px;
+              color: #83899f;
+              cursor: pointer;
+            }
+          }
+          .real-box {
+            width: 100%;
+            background-color: #ffffff;
+            padding: 0 10px;
+            border-radius: 3px;
+          }
+
+          .real-list {
+            width: calc(100% - 20px);
+            font-size: 12px;
+            color: #1d2129;
+            cursor: pointer;
+            height: 34px;
+            line-height: 34px;
+            border-bottom: 1px solid #f2f3f5;
+            &:last-child {
+              border-bottom: none;
+            }
+
+            &:hover {
+              color: var(--el-color-primary);
+            }
+          }
+        }
+
+        .interests {
+          flex: 1;
+          width: calc(100% - 20px);
+          margin: 0 10px;
+          padding-top: 15px;
+
+          .interests-bos {
+            display: flex;
+            flex-wrap: wrap;
+
+            .interests-item {
+              width: 33.333%;
+              font-size: 12px;
+              color: #101828;
+              margin-top: 15px;
+              cursor: pointer;
+
+              .img {
+                width: 34px;
+                height: 34px;
+                border-radius: 6px;
+                margin-bottom: 7px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>