修改样式

src/components/Application/src/AppLogo.vue

@@ -3,7 +3,7 @@
  * @Description: logo component
 -->
 <template>
-  <div class="anticon" :class="getAppLogoClass" @click="goHome" style="background-image: url('../resource/img/bj.png');text-align: center;">
+  <div class="anticon" :class="getAppLogoClass" @click="goHome" style="background: #e3f6fc;text-align: center;">
     <img src="../../../assets/images/logo2.png" style="width:100%" v-show="showTitle"/>
     <div class="ml-2 truncate md:opacity-100" :class="getTitleClass" v-show="!showTitle">
       <img src="../../../assets/images/logo.png" style="width:100%"/>

src/components/SimpleMenu/src/SimpleMenu.vue

@@ -192,4 +192,28 @@
 </script>
 <style lang="less">
   @import './index.less';
+
+.jeecg-menu-item-active:not(.jeecg-menu-submenu) {
+    color: white !important;
+    background-color: #1890ff !important;
+    border-radius: 5px;
+    margin: 10px 20px;
+    padding: 10px;
+}
+// .jeecg-menu {
+//     background: #fbfbfd;
+//     position: relative;
+//     display: block;
+//     width: 100%;
+//     padding: 0;
+//     margin: 0;
+//     font-size: 14px;
+//     color: rgba(0, 0, 0, 0.88);
+//     list-style: none;
+//     outline: none;
+//     border-radius: 5px;
+// }
+.jeecg-menu-light.jeecg-menu-vertical .jeecg-menu-item-active.jeecg-menu-submenu {
+    background: #f0f0f0;
+}
 </style>

src/layouts/default/index.vue

@@ -1,7 +1,7 @@
 <template>
   <Layout :class="prefixCls" v-bind="lockEvents">
-    <LayoutFeatures />
+    <!-- <LayoutFeatures /> -->
-    <LayoutHeader fixed v-if="getShowFullHeaderRef" />
+    <!-- <LayoutHeader fixed v-if="getShowFullHeaderRef" /> -->
     <Layout :class="[layoutClass]">
       <LayoutSideBar v-if="getShowSidebar || getIsMobile" />
       <Layout :class="`${prefixCls}-main`"  style="background-image: url('../resource/img/bj.png');">

src/views/invoicing/ConfigMaterial/ConfigMaterialInfoList.vue

@@ -57,45 +57,50 @@
         </a-row>
       </a-form>
     </div>
-    <a-row>
+    <div>
-      <a-col :span="6" style="padding: 0 10px 0 0;">
+        <div style="width:300px;float: left;">
-        <div style="height:729px;background:white;padding: 10px;border-radius: 5px; ">
+          <div style="with: 100%;display: flex;">
-          <a-tabs v-model:activeKey="activeKey" tabPosition="left" type="card" style="height:700px;">
+            <div class="all-card">
-            <a-tab-pane :key="key"   v-for="(item,key) in treeData">
+              <div v-for="(item, index) in treeData" :key="index" style="position: relative;">
-              <!-- 一级分类 -->
+                <div :class="clickCount === index ? 'card-target' : 'card'" :style="getCardStyle(index,treeData.length)" @click="handleClick(index,item)">
-              <template #tab>
+                  <img class="logo" src="/src/assets/images/logo.png" width="30" height="30" />
-                <div><img src="/src/assets/images/logo.png" /></div>
+                  <span style="margin-top: 8px;">{{ item.title }}</span>
-                <span title="{{item.title}}">{{item.title}}</span>
+                </div>
-              </template>
+                <div v-show="clickCount === index && index !== 4" class="sanjiao-down"></div>
+                <div v-show="clickCount === index && index" class="sanjiao-up"></div>
+              </div>
+            </div>
+            <div style="background: #fff;border-radius: 0px 5px 5px 5px ;width: calc(100% - 80px);">
               <a-menu
                   v-model:openKeys="openKeys"
                   v-model:selectedKeys="selectedKeys"
-                  style="height:690px;overflow:auto;"
+                  style="height:720px;overflow-y:auto;overflow-x: hidden;"
                   mode="inline"
                 >
-                <template v-for="(item2,key2) in item.children" >
+                <template v-for="(item2,key2) in treeChildData" >
-                  <a-sub-menu v-if="item2.children.length>0" :key="`sub`+key2" style="background-image: url('../resource/img/bj.png');text-align:center;border-radius:5px;">
+                  <a-sub-menu v-if="item2.children.length>0" :key="`sub`+key2" style="margin:20px;background-image: url('../resource/img/bj.png');text-align:center;border-radius:5px;">
                     <template #title>
-                      <div>
+                      <div style="height:50px;line-height:50px;">
                         <span><img src="/src/assets/images/logo.png" /></span><span style="margin-left: 10px;">{{item2.title}}</span>
                       </div>
                     </template>
                     <a-menu-item v-for="(item3,key3) in item2.children"  :key="key3" style="height:50px;" >
-                      <div @click="onSelect(item3)"><span style="font-size: 18px;">·</span> <span style="margin-left: 10px;">{{item3.title}}</span></div>
+                      <div @click="onSelect(item3)">
+                        <span style="font-size: 18px;">·</span> <span style="margin-left: 10px;">{{item3.title}}</span>
+                      </div>
                     </a-menu-item>
                   </a-sub-menu>
-                  <a-menu-item v-if="item2.children.length==0" :key="`sub`+key2" style="background-image: url('../resource/img/bj.png');text-align:center;border-radius:5px;">
+                  <a-menu-item v-if="item2.children.length==0" :key="`sub`+key2" style="margin:20px;background-image: url('../resource/img/bj.png');text-align:center;border-radius:5px;width:85%;height:50px;line-height:50px;">
                       <div @click="onSelect(item2)">
                         <span><img src="/src/assets/images/logo.png" /></span><span style="margin-left: 10px;">{{item2.title}}</span>
                       </div>
                   </a-menu-item>
                 </template>
               </a-menu>
-            </a-tab-pane>
-          </a-tabs>
             </div>
-      </a-col>
+          </div>
-      <a-col :span="18" >
+        </div>
+        <div style="width:calc(100% - 320px);float: left;margin-left: 20px;">
           <!--引用表格-->
           <BasicTable @register="registerTable" >
             <!--插槽:table标题-->
@@ -111,8 +116,12 @@
             <template v-slot:bodyCell="{ column, record, index, text }">
             </template>
           </BasicTable>
-      </a-col>
+        </div>
-    </a-row>
+
+    </div>
+        
+
+        
     
     <!-- 表单区域 -->
     <ConfigMaterialInfoModal ref="registerModal" @success="handleSuccess"></ConfigMaterialInfoModal>
@@ -143,11 +152,40 @@ import type { CollapseProps } from 'ant-design-vue';
   const registerModal = ref();
   const userStore = useUserStore();
   let treeData = ref<any>([]);
+  let treeChildData = ref<any>([]);
   const activeKey =  ref(0);
   const activeKey2 =  ref(0);
   const rootSubmenuKeys= ['sub1']
   const openKeys= []
   const selectedKeys= []
+  const clickCount = ref(0);
+  /**
+   * 点击菜单
+   * @param index 菜单索引
+   * @param lengths 菜单数量
+   * @param item 菜单数据
+   */
+const handleClick = (index,item) => {
+  clickCount.value = index;
+  treeChildData.value = item.children;
+
+};
+const getCardStyle = (index,allSize) => {
+  const style = {borderBottomLeftRadius:'',borderTopLeftRadius:''};
+  if (clickCount.value - 1 === index) {
+    style.borderBottomLeftRadius  = '5px';
+  }
+  if (clickCount.value + 1 === index) {
+    style.borderTopLeftRadius= '5px';
+  }
+  if(!index){
+    style.borderTopLeftRadius= '5px';
+  }
+  if(index === allSize){
+    style.borderBottomLeftRadius= '5px';
+  }
+  return style;
+};
   //注册table数据
   const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
     tableProps: {
@@ -307,6 +345,12 @@ import type { CollapseProps } from 'ant-design-vue';
   onMounted(() => {
     defHttp.get({url:'/ConfigMaterial/configMaterialCategory/getMaterialTreeData'}).then(res =>{
       treeData.value = res;
+      console.log("🚀 ~ defHttp.get ~ treeData:", treeData)
+      console.log("🚀 ~ defHttp.get ~ res:", res)
+      if(treeData.value.length > 0){
+        treeChildData.value = treeData.value[0].children;
+      }
+
     })
   });
 
@@ -337,4 +381,67 @@ import type { CollapseProps } from 'ant-design-vue';
       width: 100%;
     }
   }
+
+  .all-card {
+  width: 80px;
+  height: 730px;
+  // background-color: rgb(217, 230, 239);
+  // display: flex;
+  /* justify-content: flex-end; */
+  align-items: flex-end;
+  flex-direction: column;
+  // padding-top: 10px;
+}
+
+.card {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 80px;
+  height: 120px;
+  flex-direction: column;
+  background-color: rgb(243, 248, 251);
+  /* border-radius: 25px; */
+}
+
+.card-target {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 80px;
+  height: 120px;
+  flex-direction: column;
+  background-color: #fff;
+  border-top-left-radius: 30px;
+  border-bottom-left-radius: 30px;
+  /* position: relative; */
+  /* border-radius: 10px; */
+}
+
+.sanjiao-down {
+  position: absolute;
+  bottom: -26px;
+  left: 17px;
+  width: 64px;
+  /* 上边长度 */
+  height: 27px;
+  /* 右边长度 */
+  background-color: #fff;
+  /* 三角形填充色 */
+  /* 三点依次为：右上 (100% 0)，右下 (100% 100%)，左上 (0 0) */
+  clip-path: polygon(100% 0, 100% 100%, 0 0);
+  z-index: 999;
+}
+
+.sanjiao-up {
+  position: absolute;
+  top: -26px;
+  left: 17px;
+  width: 64px;
+  height: 27px;
+  background-color: #fff;
+  /* 三点依次为：右下 (100% 100%)，左下 (0 100%)，右上 (100% 0) */
+  clip-path: polygon(100% 100%, 0 100%, 100% 0);
+  z-index: 999;
+}
 </style>

src/views/services/directivePackage/DirectivePackageList.vue

@@ -65,44 +65,6 @@
         </a-row>
       </a-col>
     </a-row>
-    <!-- <a-row>
-      <a-col :span="6" v-for="directive of tableData.records" :key="directive.id">
-        <a-card :bordered="false" style="margin: 5px;">
-          <template #title>
-            <div style="display: flex; align-items: center; justify-content: space-between;">
-              <span>{{ directive.packageName }}</span>
-              <a-dropdown :trigger="['hover']" placement="bottomRight">
-                <a-button type="link" preIcon="tabler:settings"></a-button>
-                <template #overlay>
-                  <a-menu>
-                    <a-menu-item @click="packageEdit(directive)">
-                      <template #icon></template>
-                      编辑
-                    </a-menu-item>
-                    <a-menu-item>
-                      <a-popconfirm title="是否确认删除？" ok-text="确认" cancel-text="取消" @confirm="remove(directive)">
-                        删除
-                      </a-popconfirm>
-                    </a-menu-item>
-                  </a-menu>
-                </template>
-              </a-dropdown>
-            </div>
-          </template>
-
-          <div style="position: relative; height: 23vh;">
-            <div
-              style="height: 80%; overflow-y: auto; line-height: 1.5;white-space: pre-line;word-wrap: break-word;overflow-wrap: break-word;">
-              {{ directive.description }}
-            </div>
-            <div
-              style="position: absolute;bottom: 0;right: 0;font-weight: 600;color: rgba(0, 0, 0, 0.6);padding: 8px 0 0;">
-              {{ directive.createTime }} - {{ directive.createBy_dictText }}
-            </div>
-          </div>
-        </a-card>
-      </a-col>
-    </a-row> -->
     <div
       style="text-align:right;right: 20px;bottom: 20px;z-index: 999;padding: 8px 16px;border-radius: 4px;display: flex;align-items: center;">
       <span style="margin-right: 10px;">共 {{ tableData.total }} 条数据</span>

src/views/services/directivePackage/components/DirectivePackageModal.vue

@@ -5,31 +5,53 @@
   <a-drawer v-model:open="visible" v-if="visible" :title="title" width="80vw" :closable="false"
     :footer-style="{ textAlign: 'right' }" @close="handleCancel">
     <div style="display:flex;justify-content:space-between">
-      <div>
+      
-        <a-card title="服务指令包详情" style="width: 25vw">
+      <div style="background-color: #fafafa;border-radius: 5px;padding: 10px;width: 25vw">
+        <div style="font-size: 18px;font-weight:700;padding: 15px">服务指令包详情</div>
           <DirectivePackageForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false">
           </DirectivePackageForm>
-        </a-card>
       </div>
-      <a-card title="服务指令" style="width: 25vw">
+      
-        <template #extra>
+      <div style="background-color: #fafafa;border-radius: 5px;padding: 10px;width: 25vw;height: 80vh;overflow:auto;">
-          <a href="javascript:void(0);" @click="handleQuoteDirectives">引用 </a>
+        <div style="padding: 15px;height: 30px;width:100%;">
-          <a href="javascript:void(0);" @click="handleAddDirectives">新增</a>
+          <a-row>
-        </template>
+            <a-col :span="12">
-        <div class="scrollable-content">
+              <span style="font-size: 18px;font-weight:700;">服务指令</span>
+            </a-col>
+            <a-col :span="12" style="text-align: right;">
+              <span style="color: #777;">
+                <Icon icon="ant-design:reconciliation-outlined" /><a href="javascript:void(0);" @click="handleQuoteDirectives" style="color: #777;">引用 </a>
+              </span>
+              <span style="color: #777;margin-left: 10px;">
+                <Icon icon="ant-design:file-add-outlined" /><a href="javascript:void(0);" @click="handleAddDirectives" style="color: #777;">新增</a>
+              </span>
+            </a-col>
+          </a-row>
+        </div>
+        <div style="margin-top: 15px;">
           <a-row>
             <a-col :span="22" :push="1" v-for="directive of seletedRecord.directives" :key="directive.id"
-              style="margin-top: 15px;" @click="directiveInfo(directive)">
+              style="margin-top: 15px;border-radius: 5px;" @click="directiveInfo(directive)" :class="{ 'selected': selectedDirective === directive.id }">
-              <a-badge-ribbon :text="filterDictTextByCache('period_type', directive.cycleType)"
-                :style="{ top: '-10px' }">
                 <a-card size="small">
-                  <span>
+                  <div >
+                    <a-row :span="24">
+                      <a-col :span="12" >
+                        <span style="background-color: #67b4eb;border-radius: 50%;padding: 3px;color: white;width:27px;display: block;text-align: center;" v-if="selectedDirective === directive.id">
                           <a-popconfirm title="是否确认移除？" ok-text="确认" cancel-text="取消"
                             @confirm="deleteDirective(directive.id)">
-                      <a-button type="link" danger preIcon="ic:baseline-remove-circle"></a-button>
+                            <Icon icon="ant-design:delete-outlined" size="18"/>
                           </a-popconfirm>
                         </span>
-                  <div :class="{ 'selected': selectedDirective === directive.id }">
+                      </a-col>
+                      <a-col :span="12" style="text-align: right;">
+                        <span v-if="directive.cycleType=='1'" style="background-color: #1c9ef9;border-radius: 0 15px 15px 15px;padding: 5px 10px;color:white;">{{filterDictTextByCache('period_type', directive.cycleType)}}</span>
+                        <span v-if="directive.cycleType=='2'" style="background-color: #7a5ffd;border-radius: 0 15px 15px 15px;padding: 5px 10px;color:white;">{{filterDictTextByCache('period_type', directive.cycleType)}}</span>
+                        <span v-if="directive.cycleType=='3'" style="background-color: #35b082;border-radius: 0 15px 15px 15px;padding: 5px 10px;color:white;">{{filterDictTextByCache('period_type', directive.cycleType)}}</span>
+                      </a-col>
+                    </a-row>
+                    
+                  </div>
+                  <div style="margin-top: 10px;">
                     <div>
                       {{ directive.directiveName }}
                     </div>
@@ -41,16 +63,22 @@
                     </div>
                   </div>
                 </a-card>
-              </a-badge-ribbon>
             </a-col>
           </a-row>
         </div>
-      </a-card>
-      <div>
-        <a-card title="服务指令详情" style="width: 25vw">
-          <div class="">分类标签：{{ filterDictTextByCache('instruction_tag', derectiveInfo.instructionTagId) }}</div>
-          <div class="directiveInfoClass">服务类别：{{ derectiveInfo.categoryName || derectiveInfo.categoryId_dictText }}
       </div>
+      <div>
+        
+        <div style="border-radius: 5px;padding: 10px;width: 25vw;height: 80vh;overflow:auto;border: 1px solid #dcdfe6;"> 
+          <div style="padding: 15px;height: 30px;width:100%;">
+            <a-row>
+              <a-col :span="24">
+                <span style="font-size: 18px;font-weight:700;">服务指令详情</span>
+              </a-col>
+            </a-row>
+          </div>
+          <div style="margin-top: 20px;padding: 15px;">
+            <div class="directiveInfoClass">服务类别：{{ derectiveInfo.categoryName || derectiveInfo.categoryId_dictText }}</div>
             <div class="directiveInfoClass">服务类型：{{ derectiveInfo.typeName || derectiveInfo.typeId_dictText }}</div>
             <div class="directiveInfoClass">服务指令名称：{{ derectiveInfo.directiveName }}</div>
             <div class="directiveInfoClass">周期类型：{{ filterDictTextByCache('period_type', derectiveInfo.cycleType) }}</div>
@@ -70,7 +98,8 @@
                 <source :src="getFileAccessHttpUrl(derectiveInfo.mp4File)">
               </video>
             </div>
-        </a-card>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -303,8 +332,7 @@ defineExpose({
 </style>
 <style lang="less" scoped>
 .selected {
-  color: rgb(0, 156, 0);
+  border: 1px solid #1890ff;
-  font-weight: bold;
 }
 
 .directiveInfoClass {

src/views/services/directivePackage/components/PackageList.vue

@@ -27,12 +27,7 @@
         <div>
           <div class="scrollable-content">
             <a-row>
-              <a-col :span="11" :push="1" v-for="(directive, index) of tableData.records" :key="directive.id">
+              <a-col :span="11" :push="1" v-for="(directive, index) of tableData.records" :key="index">
-                <!-- <a-popover :placement="index % 2 == 0 ? 'left' : 'right'">
-                <template #content>
-                  <p style="width: 10vw; word-wrap: break-word; white-space: pre-wrap">{{ directive.description ||
-                    '暂无说明' }}</p>
-                </template> -->
                 <a-card :bordered="false" size="small" class="smart-card"
                   style="margin: 10px;box-shadow: 1px 1px 5px #b0b0b0;" @click="handlePackageClick(directive)"
                   :class="{ 'selected': selectedDirective.id === directive.id }">

src/views/sys/login/LoginForm.vue

@@ -122,8 +122,8 @@
   const rememberMe = ref(false);
 
   const formData = reactive({
-    account: 'admin',
+    account: '',
-    password: '123456',
+    password: '',
     inputCode: '',
   });
   const randCodeData = reactive({

src/views/system/loginmini/MiniLogin.vue

@@ -132,8 +132,8 @@
   //账号登录表单字段
   const formData = reactive<any>({
     inputCode: '',
-    username: 'admin',
+    username: '',
-    password: '123456',
+    password: '',
   });
   //手机登录表单字段
   const phoneFormData = reactive<any>({