Merge branch 'dev' into pr@dev_eslint_auto_fix

backend/src/main/java/io/dataease/job/sechedule/strategy/impl/EmailTaskHandler.java

@@ -6,6 +6,7 @@ import io.dataease.auth.service.AuthUserService;
 import io.dataease.auth.service.impl.AuthUserServiceImpl;
 import io.dataease.auth.util.JWTUtils;
 import io.dataease.dto.PermissionProxy;
+import io.dataease.dto.chart.ViewOption;
 import io.dataease.ext.ExtTaskMapper;
 import io.dataease.commons.utils.CommonBeanFactory;
 import io.dataease.commons.utils.CronUtils;
@@ -29,6 +30,7 @@ import io.dataease.plugins.xpack.larksuite.dto.response.LarksuiteMsgResult;
 import io.dataease.plugins.xpack.larksuite.service.LarksuiteXpackService;
 import io.dataease.plugins.xpack.wecom.dto.entity.WecomMsgResult;
 import io.dataease.plugins.xpack.wecom.service.WecomXpackService;
+import io.dataease.service.chart.ChartViewService;
 import io.dataease.service.chart.ViewExportExcel;
 import io.dataease.service.sys.SysUserService;
 import io.dataease.service.system.EmailService;
@@ -199,10 +201,13 @@ public class EmailTaskHandler extends TaskHandler implements Job {
 
             List<File> files = null;
             String viewIds = emailTemplateDTO.getViewIds();
-            if (StringUtils.isNotBlank(viewIds)) {
+            ChartViewService chartViewService = SpringContextUtil.getBean(ChartViewService.class);
+            List<ViewOption> viewOptions = chartViewService.viewOptions(panelId);
+            if (StringUtils.isNotBlank(viewIds) && CollectionUtils.isNotEmpty(viewOptions)) {
+                List<String> viewOptionIdList = viewOptions.stream().map(ViewOption::getId).collect(Collectors.toList());
                 String viewDataRange = emailTemplateDTO.getViewDataRange();
                 Boolean justExportView = StringUtils.isBlank(viewDataRange) || StringUtils.equals("view", viewDataRange);
-                List<String> viewIdList = Arrays.asList(viewIds.split(",")).stream().filter(StringUtils::isNotBlank).map(s -> (s.trim())).collect(Collectors.toList());
+                List<String> viewIdList = Arrays.asList(viewIds.split(",")).stream().map(s -> s.trim()).filter(viewId -> StringUtils.isNotBlank(viewId) && viewOptionIdList.contains(viewId)).collect(Collectors.toList());
                 PermissionProxy proxy = new PermissionProxy();
                 proxy.setUserId(user.getUserId());
                 files = viewExportExcel.export(panelId, viewIdList, proxy, justExportView);

backend/src/main/java/io/dataease/service/chart/ChartViewService.java

@@ -648,6 +648,7 @@ public class ChartViewService {
                 yAxis = yAxis.stream().filter(item -> StringUtils.isNotEmpty(item.getChartId()) || dataeaseNames.contains(item.getDataeaseName())).collect(Collectors.toList());
                 break;
             case "bar-group":
+            case "bar-group-stack":
                 xAxis = xAxis.stream().filter(item -> StringUtils.isNotEmpty(item.getChartId()) || (!desensitizationList.contains(item.getDataeaseName()) && dataeaseNames.contains(item.getDataeaseName()))).collect(Collectors.toList());
                 yAxis = yAxis.stream().filter(item -> StringUtils.isNotEmpty(item.getChartId()) || (!desensitizationList.contains(item.getDataeaseName()) && dataeaseNames.contains(item.getDataeaseName()))).collect(Collectors.toList());
                 xAxisBase = xAxisBase.stream().filter(item -> StringUtils.isNotEmpty(item.getChartId()) || (!desensitizationList.contains(item.getDataeaseName()) && dataeaseNames.contains(item.getDataeaseName()))).collect(Collectors.toList());
@@ -1113,6 +1114,8 @@ public class ChartViewService {
         } else if (StringUtils.equalsIgnoreCase(view.getRender(), "antv")) {
             if (StringUtils.equalsIgnoreCase(view.getType(), "bar-group")) {
                 mapChart = ChartDataBuild.transBaseGroupDataAntV(xAxisBase, xAxis, xAxisExt, yAxis, view, data, isDrill);
+            } else if (StringUtils.equalsIgnoreCase(view.getType(),"bar-group-stack")) {
+                mapChart = ChartDataBuild.transGroupStackDataAntV(xAxisBase, xAxis, xAxisExt, yAxis, extStack, data, view, isDrill);
             } else if (StringUtils.containsIgnoreCase(view.getType(), "bar-stack")) {
                 mapChart = ChartDataBuild.transStackChartDataAntV(xAxis, yAxis, view, data, extStack, isDrill);
             } else if (StringUtils.containsIgnoreCase(view.getType(), "line-stack")) {

backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java

@@ -994,4 +994,89 @@ public class ChartDataBuild {
         map.put("tableRow", tableRow);
         return map;
     }
+
+    public static Map<String, Object> transGroupStackDataAntV(List<ChartViewFieldDTO> xAxisBase, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> xAxisExt, List<ChartViewFieldDTO> yAxis, List<ChartViewFieldDTO> extStack, List<String[]> data, ChartViewWithBLOBs view, boolean isDrill) {
+        // 堆叠柱状图
+        if (CollectionUtils.isEmpty(xAxisExt)) {
+            return transStackChartDataAntV(xAxis, yAxis, view, data, extStack, isDrill);
+        //  分组柱状图
+        } else if (CollectionUtils.isNotEmpty(xAxisExt) && CollectionUtils.isEmpty(extStack)) {
+            return transBaseGroupDataAntV(xAxisBase, xAxis, xAxisExt, yAxis, view, data, isDrill);
+        // 分组堆叠柱状图
+        }else {
+            Map<String, Object> map = new HashMap<>();
+
+            List<AxisChartDataAntVDTO> dataList = new ArrayList<>();
+            for (int i1 = 0; i1 < data.size(); i1++) {
+                String[] row = data.get(i1);
+
+                StringBuilder xField = new StringBuilder();
+                if (isDrill) {
+                    xField.append(row[xAxis.size() - 1]);
+                } else {
+                    for (int i = 0; i < xAxisBase.size(); i++) {
+                        if (i == xAxisBase.size() - 1) {
+                            xField.append(row[i]);
+                        } else {
+                            xField.append(row[i]).append("\n");
+                        }
+                    }
+                }
+
+                StringBuilder groupField = new StringBuilder();
+                for (int i = xAxisBase.size(); i < xAxisBase.size() + xAxisExt.size(); i++) {
+                    if (i == xAxisBase.size() + xAxisExt.size() - 1) {
+                        groupField.append(row[i]);
+                    } else {
+                        groupField.append(row[i]).append("\n");
+                    }
+                }
+
+                StringBuilder stackField = new StringBuilder();
+                for (int i = xAxis.size(); i < xAxis.size() + extStack.size(); i++) {
+                    if (i == xAxis.size() + extStack.size() - 1) {
+                        stackField.append(row[i]);
+                    } else {
+                        stackField.append(row[i]).append("\n");
+                    }
+                }
+
+                AxisChartDataAntVDTO axisChartDataDTO = new AxisChartDataAntVDTO();
+                axisChartDataDTO.setField(xField.toString());
+                axisChartDataDTO.setName(xField.toString());
+
+                List<ChartDimensionDTO> dimensionList = new ArrayList<>();
+                List<ChartQuotaDTO> quotaList = new ArrayList<>();
+
+                for (int j = 0; j < xAxis.size(); j++) {
+                    ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
+                    chartDimensionDTO.setId(xAxis.get(j).getId());
+                    chartDimensionDTO.setValue(row[j]);
+                    dimensionList.add(chartDimensionDTO);
+                }
+                axisChartDataDTO.setDimensionList(dimensionList);
+
+                if (CollectionUtils.isNotEmpty(yAxis)) {
+                    int valueIndex = xAxis.size() + extStack.size();
+                    ChartQuotaDTO chartQuotaDTO = new ChartQuotaDTO();
+                    chartQuotaDTO.setId(yAxis.get(0).getId());
+                    quotaList.add(chartQuotaDTO);
+                    axisChartDataDTO.setQuotaList(quotaList);
+                    try {
+                        axisChartDataDTO.setValue(StringUtils.isEmpty(row[valueIndex]) ? null : new BigDecimal(row[valueIndex]));
+                    } catch (Exception e) {
+                        axisChartDataDTO.setValue(new BigDecimal(0));
+                    }
+                } else {
+                    axisChartDataDTO.setQuotaList(quotaList);
+                    axisChartDataDTO.setValue(new BigDecimal(0));
+                }
+                axisChartDataDTO.setGroup(groupField.toString());
+                axisChartDataDTO.setCategory(stackField.toString());
+                dataList.add(axisChartDataDTO);
+            }
+            map.put("data", dataList);
+            return map;
+        }
+    }
 }

frontend/src/components/DeViewSelect/index.vue

@@ -157,6 +157,9 @@ export default {
     loadOptions() {
       this.panelId && viewOptions(this.panelId).then(res => {
         this.selectOptions = res.data
+        this.innerValues?.length && this.selectOptions?.length && this.innerValues.filter(viewId => !this.selectOptions.some(option => option.id === viewId)).forEach(item => {
+          this._selectRemoveTag(item)
+        })
         this.init()
       })
     },
@@ -185,7 +188,10 @@ export default {
     },
     _selectClearFun() {
       this.$store.dispatch('task/delPanelViews', this.panelId)
-      const viewIds = JSON.parse(JSON.stringify(this.$store.getters.panelViews[this.panelId]))
+      let viewIds = []
+      if (this.$store.getters.panelViews?.[this.panelId]) {
+        viewIds = JSON.parse(JSON.stringify(this.$store.getters.panelViews[this.panelId]))
+      }
       this.$emit('input', viewIds)
     },
 

frontend/src/components/canvas/components/Editor/SettingMenu.vue

@@ -134,12 +134,12 @@ export default {
     linkJumpSetShow() {
       return this.curComponent.type === 'view' &&
         !this.jumpExcludeViewType.includes(this.curComponent.propValue.innerType) &&
-        !(this.curComponent.propValue.innerType.includes('table') && this.curComponent.propValue.render === 'echarts')
+        !(this.curComponent.propValue.innerType && this.curComponent.propValue.innerType.includes('table') && this.curComponent.propValue.render === 'echarts')
     },
     linkageSettingShow() {
       return this.curComponent.type === 'view' &&
         !this.linkageExcludeViewType.includes(this.curComponent.propValue.innerType) &&
-        !(this.curComponent.propValue.innerType.includes('table') && this.curComponent.propValue.render === 'echarts')
+        !(this.curComponent.propValue.innerType && this.curComponent.propValue.innerType.includes('table') && this.curComponent.propValue.render === 'echarts')
     },
     panelInfo() {
       return this.$store.state.panel.panelInfo

frontend/src/components/canvas/custom-component/DeRichText.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="rich-main-class"
+    :style="autoStyle"
     @dblclick="setEdit"
   >
     <Editor
@@ -86,9 +87,9 @@ export default {
         plugins: 'advlist autolink link image lists charmap  media wordcount table contextmenu directionality pagebreak', // 插件
         // 工具栏
         toolbar: 'undo redo |fontselect fontsizeselect |forecolor backcolor bold italic |underline strikethrough link| formatselect |' +
-            'alignleft aligncenter alignright | bullist numlist |' +
+          'alignleft aligncenter alignright | bullist numlist |' +
-            ' blockquote subscript superscript removeformat | table image media | fullscreen ' +
+          ' blockquote subscript superscript removeformat | table image media | fullscreen ' +
-            '| bdmap indent2em lineheight formatpainter axupimgs',
+          '| bdmap indent2em lineheight formatpainter axupimgs',
         toolbar_location: '/',
         font_formats: '微软雅黑=Microsoft YaHei;宋体=SimSun;黑体=SimHei;仿宋=FangSong;华文黑体=STHeiti;华文楷体=STKaiti;华文宋体=STSong;华文仿宋=STFangsong;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings',
         fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', // 字体大小
@@ -169,37 +170,37 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .rich-main-class {
+.rich-main-class {
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
-    overflow-y: auto!important;
+  overflow-y: auto!important;
-    position: relative;
+  position: relative;
-  }
+}
-  ::-webkit-scrollbar {
+::-webkit-scrollbar {
-    width: 0px!important;
+  width: 0px!important;
-    height: 0px!important;
+  height: 0px!important;
-  }
+}
-  ::v-deep ol {
+::v-deep ol {
-    display: block!important;
+  display: block!important;
-    list-style-type: decimal;
+  list-style-type: decimal;
-    margin-block-start: 1em!important;
+  margin-block-start: 1em!important;
-    margin-block-end: 1em!important;
+  margin-block-end: 1em!important;
-    margin-inline-start: 0px!important;
+  margin-inline-start: 0px!important;
-    margin-inline-end: 0px!important;
+  margin-inline-end: 0px!important;
-    padding-inline-start: 40px!important;
+  padding-inline-start: 40px!important;
-  }
+}
-  ::v-deep ul {
+::v-deep ul {
-    display: block!important;
+  display: block!important;
-    list-style-type: disc;
+  list-style-type: disc;
-    margin-block-start: 1em!important;
+  margin-block-start: 1em!important;
-    margin-block-end: 1em!important;
+  margin-block-end: 1em!important;
-    margin-inline-start: 0px!important;
+  margin-inline-start: 0px!important;
-    margin-inline-end: 0px!important;
+  margin-inline-end: 0px!important;
-    padding-inline-start: 40px!important;
+  padding-inline-start: 40px!important;
-  }
+}
-  ::v-deep li {
+::v-deep li {
-    display: list-item!important;
+  display: list-item!important;
-    text-align: -webkit-match-parent!important;
+  text-align: -webkit-match-parent!important;
-  }
+}
 </style>
 

frontend/src/components/canvas/custom-component/DeRichTextView.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="rich-main-class"
+    :style="autoStyle"
     @dblclick="setEdit"
   >
     <Editor

frontend/src/lang/en.js

@@ -1423,6 +1423,7 @@ export default {
     gauge_size_field_delete: 'Dynamic field changed，please edit again',
     chart_group: 'Sub Type',
     chart_bar_group: 'Bar Group',
+    chart_bar_group_stack: 'Group Stack Bar',
     field_dynamic: 'Dynamic',
     aggregation: 'Aggregation',
     filter_between: 'Between',
@@ -2569,7 +2570,10 @@ export default {
     tel: 'Tel:',
     web: 'Web:',
     apply: 'Free Trial Application',
-    more: 'More'
+    more: 'More',
+    weChat_official_account: 'WeChat official account',
+    technical_group: 'Technical exchange group',
+    f2c_train: 'FIT2CLOUD Certification'
   },
   kettle: {
     add: 'Add Kettle',

frontend/src/lang/tw.js

@@ -1423,6 +1423,7 @@ export default {
     gauge_size_field_delete: '動態值中字段發生變更，請重新編輯',
     chart_group: '子類別',
     chart_bar_group: '分組柱狀圖',
+    chart_bar_group_stack: '分組堆疊柱狀圖',
     field_dynamic: '動態值',
     aggregation: '聚合方式',
     filter_between: '介於',
@@ -2570,7 +2571,10 @@ export default {
     tel: '電話：',
     web: '網址：',
     apply: '免费试用申请',
-    more: '更多'
+    more: '更多',
+    weChat_official_account: '微信公眾號',
+    technical_group: '技術交流群',
+    f2c_train: '飛致雲認證'
   },
   kettle: {
     add: '添加 Kettle 服務',

frontend/src/lang/zh.js

@@ -1422,6 +1422,7 @@ export default {
     gauge_size_field_delete: '动态值中字段发生变更，请重新编辑',
     chart_group: '子类别',
     chart_bar_group: '分组柱状图',
+    chart_bar_group_stack: '分组堆叠柱状图',
     field_dynamic: '动态值',
     aggregation: '聚合方式',
     filter_between: '介于',
@@ -2570,7 +2571,10 @@ export default {
     tel: '电话：',
     web: '网址：',
     apply: '免费试用申请',
-    more: '更多'
+    more: '更多',
+    weChat_official_account: '微信公众号',
+    technical_group: '技术交流群',
+    f2c_train: '飞致云认证'
   },
   kettle: {
     add: '添加 Kettle 服务',

frontend/src/views/chart/chart/bar/bar_antv.js

@@ -93,6 +93,12 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta
   } else {
     delete options.isStack
   }
+
+  if (chart.type === 'bar-group-stack') {
+    options.groupField = 'group'
+  } else {
+    delete options.groupField
+  }
   // 目前只有百分比堆叠柱状图需要这个属性，先直接在这边判断而不作为参数传过来
   options.isPercent = chart.type === 'percentage-bar-stack'
   // custom color

frontend/src/views/chart/chart/common/common_antv.js

@@ -195,7 +195,7 @@ export function getLabel(chart) {
                 f.formatterCfg.thousandSeparator = false
               }
               res = valueFormatter(param.value, f.formatterCfg)
-            } else if (chart.type === 'bar-group') {
+            } else if (equalsAny(chart.type, 'bar-group', 'bar-group-stack')) {
               const f = yAxis[0]
               if (f.formatterCfg) {
                 res = valueFormatter(param.value, f.formatterCfg)
@@ -350,7 +350,11 @@ export function getTooltip(chart) {
                 }
               }
             } else if (chart.type.includes('group')) {
-              obj = { name: param.category, value: param.value }
+              if (chart.type === 'bar-group') {
+                obj = { name: param.category, value: param.value }
+              } else {
+                obj = { name: param.group, value: param.value }
+              }
               for (let i = 0; i < yAxis.length; i++) {
                 const f = yAxis[i]
                 if (f.formatterCfg) {

frontend/src/views/chart/chart/util.js

@@ -833,6 +833,85 @@ export const TYPE_CONFIGS = [
       ]
     }
   },
+  {
+    render: 'antv',
+    category: 'chart.chart_type_compare',
+    value: 'bar-group-stack',
+    title: 'chart.chart_bar_group_stack',
+    icon: 'bar-group-stack',
+    properties: [
+      'color-selector',
+      'size-selector-ant-v',
+      'label-selector-ant-v',
+      'tooltip-selector-ant-v',
+      'x-axis-selector-ant-v',
+      'y-axis-selector-ant-v',
+      'title-selector-ant-v',
+      'legend-selector-ant-v'
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'colorPanel',
+        'customColor',
+        'alpha'
+      ],
+      'size-selector-ant-v': [
+        'barDefault',
+        'barGap'
+      ],
+      'label-selector-ant-v': [
+        'show',
+        'fontSize',
+        'color',
+        'position-v'
+      ],
+      'tooltip-selector-ant-v': [
+        'show',
+        'textStyle'
+      ],
+      'x-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      'y-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'axisValue',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'isItalic',
+        'isBolder',
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
+      ],
+      'legend-selector-ant-v': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition',
+        'vPosition'
+      ]
+    }
+  },
   {
     render: 'antv',
     category: 'chart.chart_type_compare',

frontend/src/views/chart/components/ChartComponentG2.vue

@@ -253,6 +253,8 @@ export default {
         this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false)
       } else if (chart.type === 'bar-stack' || chart.type === 'percentage-bar-stack') {
         this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, false, true)
+      } else if (chart.type === 'bar-group-stack') {
+        this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, true)
       } else if (chart.type === 'bar-horizontal') {
         this.myChart = hBaseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false)
       } else if (chart.type === 'bar-stack-horizontal') {

frontend/src/views/chart/view/ChartEdit.vue

@@ -549,7 +549,7 @@
                     </el-row>
                     <!--group field,use xaxisExt-->
                     <el-row
-                      v-if="view.type === 'bar-group'"
+                      v-if="view.type === 'bar-group' || view.type === 'bar-group-stack'"
                       class="padding-lr"
                     >
                       <span style="width: 80px;text-align: right;">

frontend/src/views/wizard/index.vue

@@ -101,15 +101,22 @@
           </div>
 
           <div class="content_bottom_qr_code">
+            <div class="contact_wechat_train">
+              <div class="contact_title_qr">{{ $t('wizard.f2c_train') }}</div>
+              <img
+                class="contact_wechat_train_img"
+                src="@/assets/wizard_wechat-train.png"
+              >
+            </div>
             <div class="contact_wechat_official">
-              <div class="contact_title_qr">微信公众号</div>
+              <div class="contact_title_qr">{{ $t('wizard.weChat_official_account') }}</div>
               <img
                 class="contact_wechat_official_img"
                 src="@/assets/wizard_wechat-official.jpeg"
               >
             </div>
             <div class="contact_wechat_group">
-              <div class="contact_title_qr">技术交流群</div>
+              <div class="contact_title_qr">{{ $t('wizard.technical_group') }}</div>
               <img
                 class="contact_wechat_group_img"
                 src="@/assets/wizard_wechat-group.png"
@@ -214,244 +221,267 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .main_outer{
+.main_outer {
-    background-color: var(--MainBG, #f5f6f7)
+  background-color: var(--MainBG, #f5f6f7)
-  }
+}
-  .main_container {
-    min-width: 1250px;
-    padding: 0 24px 0 24px;
-    overflow: auto;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-size: 100% 444px !important;
-    background: url('../../assets/wizard_main_bg.png') no-repeat;
-  }
-  .main_content {
-    width: 1200px;
-  }
-  .content_top_banner{
-    color: var(--ContentBG, #FFFFFF);
-    position: relative;
-    width: 100%;
-    height: 230px;
-  }
 
-  .top_banner_content{
+.main_container {
-    position: absolute;
+  min-width: 1250px;
-    top: 62px;
+  padding: 0 24px 0 24px;
-    height: 230px;
+  overflow: auto;
-  }
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-size: 100% 444px !important;
+  background: url('../../assets/wizard_main_bg.png') no-repeat;
+}
 
-  .top_banner_img{
+.main_content {
-    position: absolute;
+  width: 1200px;
-    width: 520px;
+}
-    height: 230px;
-    top: 0;
-    right: 50px;
-  }
 
-  .top_banner_card{
+.content_top_banner {
-    position: relative;
+  color: var(--ContentBG, #FFFFFF);
-    width: 100%;
+  position: relative;
-    height: 214px;
+  width: 100%;
-  }
+  height: 230px;
+}
 
-  .hint_head {
+.top_banner_content {
-    line-height: 48px;
+  position: absolute;
-    font-weight: 600;
+  top: 62px;
-    font-size: 48px;
+  height: 230px;
-  }
+}
-  .hint_content {
-    margin-top: 12px;
-    line-height: 26px;
-    font-weight: 400;
-    font-size: 18px;
-  }
 
-  .content_middle{
+.top_banner_img {
-    height: 290px;
+  position: absolute;
-    width: 100%;
+  width: 520px;
-    margin-top: 24px;
+  height: 230px;
-  }
+  top: 0;
+  right: 50px;
+}
 
-  .content_middle_left{
+.top_banner_card {
-    float: left;
+  position: relative;
-    width: 792px;
+  width: 100%;
-    height: 290px;
+  height: 214px;
-    padding: 24px;
+}
-    border-radius: 4px;
+
-    background-color: var(--ContentBG, #FFFFFF);
+.hint_head {
+  line-height: 48px;
+  font-weight: 600;
+  font-size: 48px;
+}
+
+.hint_content {
+  margin-top: 12px;
+  line-height: 26px;
+  font-weight: 400;
+  font-size: 18px;
+}
+
+.content_middle {
+  height: 290px;
+  width: 100%;
+  margin-top: 24px;
+}
+
+.content_middle_left {
+  float: left;
+  width: 792px;
+  height: 290px;
+  padding: 24px;
+  border-radius: 4px;
+  background-color: var(--ContentBG, #FFFFFF);
+}
+
+.content_middle_title {
+  float: left;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 38px;
+  color: var(--TextPrimary, #1F2329);
+}
+
+.content_middle_more {
+  float: right;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
+  color: #646A73;
+  border-radius: 4px;
+  height: 26px;
+  padding: 2px;
+
+  &:hover {
+    background: rgba(31, 35, 41, 0.1);
+    cursor: pointer;
   }
-  .content_middle_title{
+}
-    float: left;
+
-    font-style: normal;
+.content_middle_more i:hover {
-    font-weight: 500;
+  background: none;
-    font-size: 20px;
+}
-    line-height: 38px;
+
-    color: var(--TextPrimary, #1F2329);
+.content_middle_more a:hover {
-  }
+  background: none;
-  .content_middle_more{
+}
-    float: right;
+
-    font-style: normal;
+.content_middle_right {
-    font-weight: 400;
+  float: left;
-    font-size: 14px;
+  height: 290px;
-    line-height: 22px;
+  width: 384px;
-    color: #646A73;
+  margin-left: 24px;
-    border-radius: 4px;
+  padding: 24px;
-    height: 26px;
+  border-radius: 4px;
-    padding: 2px;
+  background-color: var(--ContentBG, #FFFFFF);
-    &:hover {
+}
-      background: rgba(31, 35, 41, 0.1);
+
-      cursor: pointer;
+.content_middle_left {
+  float: left;
+  width: 792px;
+  height: 290px;
+  padding: 24px;
+  border-radius: 4px;
+  background-color: var(--ContentBG, #FFFFFF);
+}
+
+.li-custom {
+  margin-top: 16px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  list-style-type: disc;
+  list-style-position: inside;
+  border-radius: 4px;
+  padding-left: 12px;
+  margin-left: -12px;
+
+  &:hover {
+    background: rgba(31, 35, 41, 0.1);
+    cursor: pointer;
+    color: #3370FF !important;
+
+    .li-a {
+      color: #3370FF !important;
     }
   }
+}
 
-  .content_middle_more i:hover{
+.li-custom a:hover {
-    background: none;
+  background: none;
-  }
+}
 
-  .content_middle_more a:hover{
+.li-a {
-    background: none;
+  color: var(--TextPrimary, #1F2329);
-  }
+}
 
-  .content_middle_right {
+.ul-custom {
-    float: left;
+  padding-inline-start: 0px;
-    height: 290px;
+  color: #8F959E;
-    width: 384px;
+}
-    margin-left: 24px;
-    padding: 24px;
-    border-radius: 4px;
-    background-color: var(--ContentBG, #FFFFFF);
-  }
 
-  .content_middle_left{
+.content_bottom {
-    float: left;
+  width: 100%;
-    width: 792px;
+  height: 208px;
-    height: 290px;
+}
-    padding: 24px;
-    border-radius: 4px;
-    background-color: var(--ContentBG, #FFFFFF);
-  }
 
-  .li-custom {
+.content_bottom_contact {
-    margin-top: 16px;
+  float: left;
-    font-weight: 400;
+  margin-left: 278px;
-    font-size: 14px;
+  width: 300px;
-    line-height: 22px;
+  margin-top: 40px;
-    overflow: hidden;
+}
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    list-style-type : disc;
-    list-style-position: inside;
-    border-radius: 4px;
-    padding-left: 12px;
-    margin-left: -12px;
-    &:hover {
-      background: rgba(31, 35, 41, 0.1);
-      cursor: pointer;
-      color: #3370FF!important;
-      .li-a{
-        color: #3370FF!important;
-      }
-    }
-  }
 
-  .li-custom a:hover {
+.contact_title {
-    background: none;
+  font-style: normal;
-  }
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--TextPrimary, #1F2329);
+  margin-bottom: 16px;
+}
 
-  .li-a{
+.contact_content {
-    color: var(--TextPrimary, #1F2329);
+  font-style: normal;
-  }
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
+  color: #646A73;
+  margin-top: 8px;
+}
 
-  .ul-custom {
+.contact_content a:hover {
-    padding-inline-start:0px;
+  color: #3370FF;
-    color: #8F959E;
+}
-  }
 
-  .content_bottom{
+.content_bottom_qr_code {
-    width: 100%;
+  width: 400px;
-    height: 208px;
+  float: right;
-  }
+  text-align: right;
+  margin-right: 180px;
+  margin-top: 40px;
+}
 
-  .content_bottom_contact{
+.contact_title_qr {
-    float: left;
+  font-style: normal;
-    margin-left: 278px;
+  font-weight: 400;
-    width: 300px;
+  font-size: 12px;
-    margin-top: 40px;
+  line-height: 20px;
-  }
+  text-align: center;
+  color: #646A73;
+  margin-bottom: 8px;
+}
 
-  .contact_title{
+.contact_wechat_train {
-    font-style: normal;
+  width: 100px;
-    font-weight: 500;
+  float: right;
-    font-size: 14px;
+}
-    line-height: 22px;
-    color: var(--TextPrimary, #1F2329);
-    margin-bottom: 16px;
-  }
 
-  .contact_content{
+.contact_wechat_train_img {
-    font-style: normal;
+  box-sizing: border-box;
-    font-weight: 400;
+  width: 100px;
-    font-size: 14px;
+  height: 100px;
-    line-height: 22px;
+  border: 2px solid #FFFFFF;
-    color: #646A73;
+}
-    margin-top: 8px;
-  }
-  .contact_content a:hover{
-    color: #3370FF;
-  }
 
-  .content_bottom_qr_code{
+.contact_wechat_official {
-    width: 300px;
+  width: 100px;
-    float: right;
+  float: right;
-    text-align: right;
+  margin-right: 40px;
-    margin-right: 280px;
+}
-    margin-top: 40px;
-  }
 
-  .contact_title_qr{
+.contact_wechat_official_img {
-    font-style: normal;
+  box-sizing: border-box;
-    font-weight: 400;
+  width: 100px;
-    font-size: 12px;
+  height: 100px;
-    line-height: 20px;
+  border: 2px solid #FFFFFF;
-    text-align: center;
+}
-    color: #646A73;
-    margin-bottom: 8px;
-  }
 
-  .contact_wechat_official{
+.contact_wechat_group {
-    width: 100px;
+  width: 100px;
-    float: right;
+  float: right;
-  }
+  margin-right: 40px;
+}
 
-  .contact_wechat_official_img{
+.contact_wechat_group_img {
-    box-sizing: border-box;
+  box-sizing: border-box;
-    width: 100px;
+  width: 100px;
-    height: 100px;
+  height: 100px;
-    border: 2px solid #FFFFFF;
+  border: 2px solid #FFFFFF;
-  }
+}
 
-  .contact_wechat_group{
+.main_container_outer {
-    width: 100px;
+  width: 100%;
-    float: right;
+  height: calc(100vh - 56px);
-    margin-right: 40px;
+  background-color: var(--MainBG, #f5f6f7);
-  }
+  overflow: auto;
-
+}
-  .contact_wechat_group_img{
-    box-sizing: border-box;
-    width: 100px;
-    height: 100px;
-    border: 2px solid #FFFFFF;
-  }
-
-  .main_container_outer{
-    width: 100%;
-    height: calc(100vh - 56px);
-    background-color: var(--MainBG, #f5f6f7);
-    overflow: auto;
-  }
 
 </style>