style update

src/assets/styles/mixin.less

@@ -2684,5 +2684,49 @@ input:-internal-autofill-selected {
 
 // 朋友搜索框
 .ant-input-search.searchFriendInput {
+    width: 100%;
+    height: 30px;
+    background: @m-grey53;
+    border-color: @m-grey54;
+    .rounded-corners(15px);
+    .anticon-search {
+        color: @m-grey55;
+    }
+    .ant-input-group {
+        .ant-input {
+            background: @m-grey53;
+        }
+        .ant-input-group-addon {
+            background: @m-grey53;
+            .rounded-corners(0, 15px, 15px, 0);
+            .ant-input-search-button {
+                width: 56px;
+                height: 26px;
+                background: #3A87F7;
+                padding: 0;
+                align-self: center;
+                align-items: center;
+                .rounded-corners(13px);
+                span {
+                    width: 100%;
+                    height: 26px;
+                    line-height: 22px;
+                    text-align: center;
+                    color: #ffffff;
+                    font-weight: 400;
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+}
 
+.ant-popover.friendPopover {
+    .ant-popover-content {
+        .ant-popover-inner {
+            .ant-popover-inner-content {
+                padding: 0;
+            }
+        }
+    }
 }

src/assets/styles/symbol_no_color/demo_index.html

@@ -55,15 +55,51 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#xe653;</span>
+                <div class="name">表单 列表-03</div>
+                <div class="code-name">&amp;#xe653;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe607;</span>
+                <div class="name">通知</div>
+                <div class="code-name">&amp;#xe607;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe608;</span>
+                <div class="name">商品</div>
+                <div class="code-name">&amp;#xe608;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xe62d;</span>
-                <div class="name">用户</div>
+                <div class="name">删 除</div>
                 <div class="code-name">&amp;#xe62d;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe69e;</span>
-                <div class="name">用户</div>
-                <div class="code-name">&amp;#xe69e;</div>
+              <span class="icon iconfont">&#xe71c;</span>
+                <div class="name">朋友</div>
+                <div class="code-name">&amp;#xe71c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66f;</span>
+                <div class="name">模版</div>
+                <div class="code-name">&amp;#xe66f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66b;</span>
+                <div class="name">朋友</div>
+                <div class="code-name">&amp;#xe66b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe665;</span>
+                <div class="name">新建 增加 新增-20</div>
+                <div class="code-name">&amp;#xe665;</div>
               </li>
           
             <li class="dib">
@@ -336,9 +372,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1627897449468') format('woff2'),
-       url('iconfont.woff?t=1627897449468') format('woff'),
-       url('iconfont.ttf?t=1627897449468') format('truetype');
+  src: url('iconfont.woff2?t=1630590563275') format('woff2'),
+       url('iconfont.woff?t=1630590563275') format('woff'),
+       url('iconfont.ttf?t=1630590563275') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -365,20 +401,74 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
-            <span class="icon iconfont icon-yonghu4"></span>
+            <span class="icon iconfont icon-biaodanliebiao-"></span>
             <div class="name">
-              用户
+              表单 列表-03
             </div>
-            <div class="code-name">.icon-yonghu4
+            <div class="code-name">.icon-biaodanliebiao-
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-yonghu3"></span>
+            <span class="icon iconfont icon-tongzhi"></span>
             <div class="name">
-              用户
+              通知
+            </div>
+            <div class="code-name">.icon-tongzhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shangpin"></span>
+            <div class="name">
+              商品
+            </div>
+            <div class="code-name">.icon-shangpin
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shanchu"></span>
+            <div class="name">
+              删 除
+            </div>
+            <div class="code-name">.icon-shanchu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-pengyou1"></span>
+            <div class="name">
+              朋友
+            </div>
+            <div class="code-name">.icon-pengyou1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-moban"></span>
+            <div class="name">
+              模版
+            </div>
+            <div class="code-name">.icon-moban
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-pengyou"></span>
+            <div class="name">
+              朋友
             </div>
-            <div class="code-name">.icon-yonghu3
+            <div class="code-name">.icon-pengyou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xinjianzengjiaxinzeng-20"></span>
+            <div class="name">
+              新建 增加 新增-20
+            </div>
+            <div class="code-name">.icon-xinjianzengjiaxinzeng-20
             </div>
           </li>
           
@@ -789,18 +879,66 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-yonghu4"></use>
+                  <use xlink:href="#icon-biaodanliebiao-"></use>
                 </svg>
-                <div class="name">用户</div>
-                <div class="code-name">#icon-yonghu4</div>
+                <div class="name">表单 列表-03</div>
+                <div class="code-name">#icon-biaodanliebiao-</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-yonghu3"></use>
+                  <use xlink:href="#icon-tongzhi"></use>
                 </svg>
-                <div class="name">用户</div>
-                <div class="code-name">#icon-yonghu3</div>
+                <div class="name">通知</div>
+                <div class="code-name">#icon-tongzhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shangpin"></use>
+                </svg>
+                <div class="name">商品</div>
+                <div class="code-name">#icon-shangpin</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shanchu"></use>
+                </svg>
+                <div class="name">删 除</div>
+                <div class="code-name">#icon-shanchu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-pengyou1"></use>
+                </svg>
+                <div class="name">朋友</div>
+                <div class="code-name">#icon-pengyou1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-moban"></use>
+                </svg>
+                <div class="name">模版</div>
+                <div class="code-name">#icon-moban</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-pengyou"></use>
+                </svg>
+                <div class="name">朋友</div>
+                <div class="code-name">#icon-pengyou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xinjianzengjiaxinzeng-20"></use>
+                </svg>
+                <div class="name">新建 增加 新增-20</div>
+                <div class="code-name">#icon-xinjianzengjiaxinzeng-20</div>
             </li>
           
             <li class="dib">

src/assets/styles/symbol_no_color/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2293216 */
-  src: url('iconfont.woff2?t=1627897449468') format('woff2'),
-       url('iconfont.woff?t=1627897449468') format('woff'),
-       url('iconfont.ttf?t=1627897449468') format('truetype');
+  src: url('iconfont.woff2?t=1630590563275') format('woff2'),
+       url('iconfont.woff?t=1630590563275') format('woff'),
+       url('iconfont.ttf?t=1630590563275') format('truetype');
 }
 
 .iconfont {
@@ -13,12 +13,36 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-yonghu4:before {
+.icon-biaodanliebiao-:before {
+  content: "\e653";
+}
+
+.icon-tongzhi:before {
+  content: "\e607";
+}
+
+.icon-shangpin:before {
+  content: "\e608";
+}
+
+.icon-shanchu:before {
   content: "\e62d";
 }
 
-.icon-yonghu3:before {
-  content: "\e69e";
+.icon-pengyou1:before {
+  content: "\e71c";
+}
+
+.icon-moban:before {
+  content: "\e66f";
+}
+
+.icon-pengyou:before {
+  content: "\e66b";
+}
+
+.icon-xinjianzengjiaxinzeng-20:before {
+  content: "\e665";
 }
 
 .icon-fangan:before {

src/assets/styles/symbol_no_color/iconfont.json

@@ -6,18 +6,60 @@
   "description": "",
   "glyphs": [
     {
-      "icon_id": "18789269",
-      "name": "用户",
-      "font_class": "yonghu4",
+      "icon_id": "13965701",
+      "name": "表单 列表-03",
+      "font_class": "biaodanliebiao-",
+      "unicode": "e653",
+      "unicode_decimal": 58963
+    },
+    {
+      "icon_id": "3083903",
+      "name": "通知",
+      "font_class": "tongzhi",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
+    {
+      "icon_id": "7800496",
+      "name": "商品",
+      "font_class": "shangpin",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "11090819",
+      "name": "删 除",
+      "font_class": "shanchu",
       "unicode": "e62d",
       "unicode_decimal": 58925
     },
     {
-      "icon_id": "9037996",
-      "name": "用户",
-      "font_class": "yonghu3",
-      "unicode": "e69e",
-      "unicode_decimal": 59038
+      "icon_id": "849051",
+      "name": "朋友",
+      "font_class": "pengyou1",
+      "unicode": "e71c",
+      "unicode_decimal": 59164
+    },
+    {
+      "icon_id": "9727836",
+      "name": "模版",
+      "font_class": "moban",
+      "unicode": "e66f",
+      "unicode_decimal": 58991
+    },
+    {
+      "icon_id": "2867977",
+      "name": "朋友",
+      "font_class": "pengyou",
+      "unicode": "e66b",
+      "unicode_decimal": 58987
+    },
+    {
+      "icon_id": "14020349",
+      "name": "新建 增加 新增-20",
+      "font_class": "xinjianzengjiaxinzeng-20",
+      "unicode": "e665",
+      "unicode_decimal": 58981
     },
     {
       "icon_id": "8594782",

src/assets/styles/theme.css

@@ -56,6 +56,9 @@
     --m-grey50: #ACB8C0;
     --m-grey51: #354859;
     --m-grey52: #1E304A;
+    --m-grey53: #2C3842;
+    --m-grey54: #2C3842;
+    --m-grey55: #435564;
     /* --m-green1: #e8ffef; */
 
     --m-black0: #242a2e;
@@ -242,6 +245,9 @@
     --m-grey50: #ACB8C0;
     --m-grey51: #354859;
     --m-grey52: #1E304A;
+    --m-grey53: #2C3842;
+    --m-grey54: #2C3842;
+    --m-grey55: #435564;
     /* --m-green1: #e8ffef; */
 
     --m-black0: #242a2e;
@@ -426,6 +432,9 @@
     --m-grey50: #3C454B;
     --m-grey51: #CCCCCC;
     --m-grey52: #E4E8EE;
+    --m-grey53: #F6F8FA;
+    --m-grey54: #B9D2E0;
+    --m-grey55: #ACBBC5;
 
     --m-black0: #F8FBFF;
     --m-black1: #ECF2F5;

src/assets/styles/variables.less

@@ -65,6 +65,9 @@
 @m-grey50: var(--m-grey50);
 @m-grey51: var(--m-grey51);
 @m-grey52: var(--m-grey52);
+@m-grey53: var(--m-grey53);
+@m-grey54: var(--m-grey54);
+@m-grey55: var(--m-grey55);
 
 @m-black: #000000;
 @m-black0: var(--m-black0);

src/layout/components/header.vue

@@ -1,74 +1,70 @@
 <template>
-  <!-- 风险管理 -->
+    <!-- 风险管理 -->
 
-  <div v-if="isOemByEnum(OemType.manager)">
-    <img src="../../assets/images/logoHeader.png" />
-    <span>深圳市多元世纪信息技术股份有限公司</span>
-  </div>
-  <!-- 云融 -->
+    <div v-if="isOemByEnum(OemType.manager)">
+        <img src="../../assets/images/logoHeader.png" />
+        <span>深圳市多元世纪信息技术股份有限公司</span>
+    </div>
+    <!-- 云融 -->
 
-  <div v-else-if="isOemByEnum(OemType.wrspot)">
-    <img src="../../assets/images/headLogo.jpg" />
-    <span>云融</span>
-  </div>
-  <div v-else>
-    <img src="../../assets/images/logoHeader.png" />
-    <span>深圳市多元世纪信息技术股份有限公司</span>
-  </div>
-  <div class="m-layout-header-right">
-    <div @click="openDrawer">
-      <span>{{ getUserName() }}，您好！</span>
+    <div v-else-if="isOemByEnum(OemType.wrspot)">
+        <img src="../../assets/images/headLogo.jpg" />
+        <span>云融</span>
+    </div>
+    <div v-else>
+        <img src="../../assets/images/logoHeader.png" />
+        <span>深圳市多元世纪信息技术股份有限公司</span>
     </div>
-    <div class="relative">
-      <!-- <a-input-search ref="userNameInput"
+    <div class="m-layout-header-right">
+        <div @click="openDrawer">
+            <span>{{ getUserName() }}，您好！</span>
+        </div>
+        <div class="relative">
+            <!-- <a-input-search ref="userNameInput"
                           class="searchInput"
                           placeholder="请输入代码/名称"
                           @pressEnter="search">
                           readonly
             </a-input-search>-->
-      <!-- <a-icon type="search" /> -->
-    </div>
-    <div v-if="isOemByEnum(OemType.wrspot)">
-      <a-popover trigger="click"
-                 placement="bottom">
-        <template #content>
-          <Friend />
-        </template>
-        <span>好友</span>
-      </a-popover>
-    </div>
-    <div class="news-container">
-      <a-badge @click="openNotice"
-               :dot="getUnReadNoticeLength() > 0">
-        <svg class="icon svg-icon"
-             aria-hidden="true">
-          <use xlink:href="#icon-xiaoxi" />
-        </svg>
-      </a-badge>
-    </div>
-    <div>
-      <a-popover v-model:visible="visible"
-                 trigger="click"
-                 placement="bottomRight">
-        <template #content>
-          <div v-for="item in setMenu"
-               class="popItem"
-               @click="chooseSetMenu(item.path)"
-               :key="item.path">{{ item.name }}</div>
-        </template>
-        <a-avatar :size="24">
-          <template #icon>
-            <!-- <SettingFilled /> -->
-            <svg class="icon svg-icon"
-                 aria-hidden="true">
-              <use xlink:href="#icon-yonghu4" />
-            </svg>
-          </template>
-        </a-avatar>
-      </a-popover>
-      <Setting />
+            <!-- <a-icon type="search" /> -->
+        </div>
+        <div v-if="isOemByEnum(OemType.wrspot)">
+            <a-popover trigger="click" placement="bottom" overlayClassName="friendPopover">
+                <template #content>
+                    <Friend />
+                </template>
+                <span>好友</span>
+            </a-popover>
+        </div>
+        <div class="news-container">
+            <a-badge @click="openNotice" :dot="getUnReadNoticeLength() > 0">
+                <svg class="icon svg-icon" aria-hidden="true">
+                    <use xlink:href="#icon-xiaoxi" />
+                </svg>
+            </a-badge>
+        </div>
+        <div>
+            <a-popover v-model:visible="visible" trigger="click" placement="bottomRight">
+                <template #content>
+                    <div
+                        v-for="item in setMenu"
+                        class="popItem"
+                        @click="chooseSetMenu(item.path)"
+                        :key="item.path"
+                    >{{ item.name }}</div>
+                </template>
+                <a-avatar :size="24">
+                    <template #icon>
+                        <!-- <SettingFilled /> -->
+                        <svg class="icon svg-icon" aria-hidden="true">
+                            <use xlink:href="#icon-yonghu4" />
+                        </svg>
+                    </template>
+                </a-avatar>
+            </a-popover>
+            <Setting />
+        </div>
     </div>
-  </div>
 </template>
 
 <script lang="ts">

src/views/setting/friends/index.vue

@@ -4,27 +4,35 @@
         <div class="my-friend">
             <a-input-search
                 placeholder="输入好友代码进行搜索"
-                enter-button
+                enter-button="搜索"
                 class="searchFriendInput"
                 @search="handleSearch"
-            />
-            <div v-for="(item, index) in searchFriend" :key="index + '11'">
-                <a-row type="flex">
-                    <a-col :span="12">
+            >
+                <template #prefix>
+                    <SearchOutlined />
+                </template>
+            </a-input-search>
+            <div class="mt10">
+                <div class="item" v-for="(item, index) in searchFriend" :key="index + '11'">
+                    <div class="left">
                         <span>{{item.frienduserid}} {{ item.friendname }}</span>
-                    </a-col>
-                    <a-col :span="6" @click="operate(item)">
-                        <span v-if="item.isfriend">删除</span>
-                        <span v-else>添加</span>
-                    </a-col>
-                </a-row>
-                <a-divider />
+                    </div>
+                    <div class="right" @click="operate(item)">
+                        <!-- <span v-if="item.isfriend">
+                            <svg class="icon svg-icon" aria-hidden="true">
+                                <use xlink:href="#icon-shanchu" />
+                            </svg>
+                        </span>-->
+                        <span class="addFriBtn">加为好友</span>
+                    </div>
+                </div>
             </div>
         </div>
     </a-spin>
 </template>
 
 <script lang="ts">
+import { SearchOutlined } from '@ant-design/icons-vue';
 import { defineComponent, ref } from 'vue';
 import { initData } from '@/common/methods';
 import { QueryWrFriendApplyRsp } from '@/services/go/wrtrade/interface';
@@ -38,6 +46,7 @@ import { getLongTypeLoginID } from '@/services/bus/login';
 
 export default defineComponent({
     name: 'friend',
+    components: { SearchOutlined },
     setup() {
         const myFriends = ref<QueryWrFriendApplyRsp[]>([]);
         const searchFriend = ref<QueryWrFriendApplyRsp[]>([]);
@@ -117,6 +126,50 @@ export default defineComponent({
 .my-friend {
     height: 340px;
     width: 260px;
+    padding: 10px 9px 0 11px;
+    background: @m-grey22;
+    border: 1px solid @m-grey23;
+    box-shadow: 0px 10px 10px 0px @m-black18;
+    .rounded-corners(5px);
+    .item {
+        width: 100%;
+        height: 40px;
+        line-height: 40px;
+        color: #869ca9;
+        font-size: 14px;
+        border-bottom: 1px solid #3b4651;
+        .flex;
+        justify-content: space-between;
+        .left {
+            span:last-child {
+                margin-left: 10px;
+            }
+        }
+        .right {
+            padding-right: 10px;
+            .icon {
+                color: #f39730;
+                font-size: 16px;
+            }
+            .addFriBtn {
+                display: inline-block;
+                cursor: pointer;
+                width: 80px;
+                height: 26px;
+                border: 1px solid #3a87f7;
+                .rounded-corners(13px);
+                color: #3a87f7;
+                font-size: 14px;
+                line-height: 24px;
+                text-align: center;
+            }
+        }
+    }
+    .item:hover {
+        background: #516476;
+        .rounded-corners(5px);
+        color: #ffffff;
+    }
 }
 </style
 >;