feat(icon): 新增下拉箭头图标并优化相关样式

- 新增下拉箭头图标(xiala)
- 优化YLSelect组件样式
- 更新公共样式文件，增加图标相关样式
- 修改字体文件，添加新图标

components.d.ts

@@ -32,7 +32,6 @@ declare module 'vue' {
     VanGrid: typeof import('vant/es')['Grid']
     VanGridItem: typeof import('vant/es')['GridItem']
     VanIcon: typeof import('vant/es')['Icon']
-    VanList: typeof import('vant/es')['List']
     VanNavBar: typeof import('vant/es')['NavBar']
     VanPicker: typeof import('vant/es')['Picker']
     VanPopup: typeof import('vant/es')['Popup']

src/assets/css/public.scss

@@ -14,6 +14,7 @@
 
 .van-popup--bottom.van-popup--round {
   border-radius: 10px 10px 0 0 !important;
+  background: #f2f2f2;
 }
 
 .van-radio-group {
@@ -131,3 +132,95 @@
   border-color: $theme-color;
   background-color: $theme-color;
 }
+
+.van-grid-item__content {
+  padding: 8px 10px;
+  border-radius: 10px;
+}
+
+.yl-select {
+  position: relative;
+  overflow: hidden;
+  max-width: 95vw;
+}
+
+.el-select__wrapper::after {
+  content: '\e65b';
+  position: absolute;
+  top: 5px;
+  right: 10px;
+  font-size: 10px;
+}
+
+.el-select__suffix {
+  display: none;
+}
+
+// 自定义下拉箭头样式
+.el-select__caret {
+  color: $theme-color; // 修改箭头颜色
+  font-size: 18px; // 修改箭头大小
+  transform: rotate(0deg); // 修改箭头旋转角度（默认是0度，展开时会旋转180度）
+}
+
+.el-cascader__tags .el-tag {
+  background: $theme-color;
+  color: #fff;
+}
+
+.el-tag .el-tag__close {
+  color: #fff;
+}
+
+.el-cascader-node.in-active-path,
+.el-cascader-node.is-active,
+.el-cascader-node.is-selectable.in-checked-path {
+  color: $theme-color;
+}
+
+.el-checkbox__inner:hover {
+  border-color: $theme-color;
+}
+
+.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  border-color: $theme-color;
+  background: $theme-color;
+}
+
+.el-input,
+.el-input__wrapper {
+  background: #fafbfc;
+}
+
+.el-select__caret.is-reverse {
+  transform: rotate(180deg); // 展开时旋转180度
+}
+
+.el-select {
+  border: none;
+}
+
+.el-select__wrapper {
+  background: #fafbfc;
+}
+
+.el-select-dropdown__item.is-selected {
+  color: $theme-color;
+}
+
+.el-input__wrapper,
+.el-select__wrapper {
+  box-shadow: none;
+}
+
+.el-cascader .el-input.is-focus .el-input__wrapper,
+.el-input__wrapper.is-focus,
+.el-select__wrapper.is-focused,
+.el-cascader:not(.is-disabled):hover .el-input__wrapper {
+  box-shadow: 0 0 0 0.0267rem $theme-color inset;
+
+  &::after {
+    color: $theme-color;
+  }
+}

src/components/YLSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <el-select
     v-model="selectedValue"
-    class="yl-select-wrapper"
+    class="yl-select-wrapper mobilefont"
     popper-class="yl-select"
     @change="handleChange"
   >
@@ -84,9 +84,13 @@ export default defineComponent({
 .yl-select-wrapper {
   position: relative;
   display: inline-block;
+  padding: 2px 0;
+  border-color: transparent;
+  border-radius: 12px;
+  background: #fafbfc;
+  outline-color: transparent;
   font-size: 16px; /* 增加字体大小 */
   line-height: 1.5; /* 增加行高 */
-  //margin-botton: 10px;
 }
 
 .yl-select-label {
@@ -97,9 +101,6 @@ export default defineComponent({
 }
 </style>
 
-<style>
+<style lang="scss">
-.yl-select {
+@import '@/assets/css/theme';
-  overflow: hidden;
-  max-width: 95vw;
-}
 </style>

src/fonts/moblie/iconfont.css

@@ -1,9 +1,9 @@
 @font-face {
   font-family: mobilefont; /* Project id 4841764 */
   src:
-    url('iconfont.woff2?t=1742209273577') format('woff2'),
+    url('iconfont.woff2?t=1742213166999') format('woff2'),
-    url('iconfont.woff?t=1742209273577') format('woff'),
+    url('iconfont.woff?t=1742213166999') format('woff'),
-    url('iconfont.ttf?t=1742209273577') format('truetype');
+    url('iconfont.ttf?t=1742213166999') format('truetype');
 }
 
 .mobilefont {
@@ -14,6 +14,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.mobilefont-xiala::before {
+  content: '\e65b';
+}
+
 .mobilefont-upload::before {
   content: '\e682';
 }

src/fonts/moblie/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "mobilefont-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "6548548",
+      "name": "下拉",
+      "font_class": "xiala",
+      "unicode": "e65b",
+      "unicode_decimal": 58971
+    },
     {
       "icon_id": "15838548",
       "name": "upload",

src/views/Design/components/ActionCompoents/QuestionAction.vue

@@ -121,6 +121,7 @@
     position="bottom"
     closeable
     close-icon="close"
+    class="popup-bk"
     round
     :style="{ minHeight: '50%', maxHeight: '75%' }"
     @close="saveLogics"
@@ -267,8 +268,8 @@ const getSkipTypeText = (skipType) => {
   const ls = [];
   logics.map((item) => {
     if (
-      item.skip_type === skipType
+      item.skip_type === skipType &&
-      && item.question_index === activeQuestion.value.question_index
+      item.question_index === activeQuestion.value.question_index
     ) {
       ls.push(item);
     }
@@ -320,6 +321,10 @@ const updateConfig = (value) => {
   //max-width: 90vw;
 }
 
+.popup-bk {
+  background-color: #fff !important;
+}
+
 .question-action-container {
   font-size: 20px;
 

src/views/Design/components/ActionCompoents/components/QuestionItemAction/QuestionBefore.vue

@@ -5,9 +5,9 @@
     >
       <div class="mt10">
         <template v-for="(log, logIndex) in item.logic" :key="logIndex">
-          <div class=" ">
-            <div class="question-before mb10">
           <div>
+            <div class="question-before mb10">
+              <div class="logics-content">
                 <!--              固定分组-->
                 <!--          if  always-->
                 <yl-select
@@ -282,52 +282,24 @@
                 </template>
               </BeforeMartrixComplation>
             </div>
-
-            <!--            <div class="action">-->
-            <!--              <van-icon-->
-            <!--                v-if="logIndex !== 0 || log.logic === 'always'"-->
-            <!--                name="clear"-->
-            <!--                class="mr10"-->
-            <!--                @click="deleteLogic(logIndex, item.logic, index)"-->
-            <!--              ></van-icon>-->
-            <!--              <van-icon-->
-            <!--                v-if="log.logic !== 'always'"-->
-            <!--                name="add"-->
-            <!--                @click="addLogicItem(logIndex, item.logic)"-->
-            <!--              ></van-icon>-->
-            <!--            </div>-->
           </div>
         </template>
         <!--            如果是题前隐藏-->
-        <div v-if="skipType === 1">隐藏本题</div>
+        <div v-if="skipType === 1" class="tip-text">隐藏本题</div>
         <!--            如果是题后跳转-->
-        <div v-if="skipType === 0" class="flex align-center space-between">
+        <div v-if="skipType === 0" class="">
-          <div class="jump-text mr10">跳转到</div>
+          <div class="jump-text mr10 tip-text">跳转到</div>
           <yl-select
             v-model="item.skip_question_index"
-            class="skip-select"
+            class="skip-select mt10"
             :options="skipOption"
           ></yl-select>
         </div>
       </div>
-
-      <!--      <van-divider-->
-      <!--        :dashed="true"-->
-      <!--        :hairline="false"-->
-      <!--        content-position="right"-->
-      <!--        :style="{ borderColor: '#bfbfbf' }"-->
-      <!--      >-->
-      <!--        <van-icon name="delete" @click="remoteLogic(index)">删除</van-icon>-->
-      <!--      </van-divider>-->
-      <!--      <div-->
-      <!--        v-if="item.skip_type === skipType && item.question_index === activeQuestion.question_index"-->
-      <!--      >-->
-      <!--        del-->
-      <!--      </div>-->
     </div>
   </template>
-  <div class="text-center">
+  <div class="text-center mt10">
-    <van-button size="small" @click="addLogic">添加逻辑</van-button>
+    <van-button class="add-action-btn br12" size="small" @click="addLogic">添加逻辑</van-button>
   </div>
 </template>
 <script setup>
@@ -497,6 +469,13 @@ const logicIf = (value, index) => {
 </script>
 
 <style scoped lang="scss">
+@import '@/assets/css/theme';
+
+.logics-content {
+  border-color: transparent;
+  outline-color: transparent;
+}
+
 .flex1 {
   flex: 1;
 }
@@ -526,6 +505,20 @@ const logicIf = (value, index) => {
   width: 50px;
 }
 
+.tip-text {
+  color: #000;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.add-action-btn {
+  height: 35px;
+  padding: 12px 18px;
+  border: none;
+  background: rgba(240, 248, 235, 1);
+  color: $theme-color;
+}
+
 .question-before {
   width: 100%;
 

src/views/Design/components/Questions/FileUpload.vue

@@ -64,6 +64,7 @@ const emitValue = () => {
       :label="element.stem"
       :required="element.config.is_required === 1"
       label-align="top"
+      input-align="center"
       class="contenteditable-question-title"
     >
       <template #left-icon>

src/views/Survey/views/Create/Index.vue

@@ -618,7 +618,7 @@ onMounted(async() => {
 }
 
 :deep(.van-popup--bottom.van-popup--round) {
-  background-color: #f2f2f2 !important;
+  background-color: #f2f2f2;
 }
 
 .setting_title {