修改样式和交互效果

frontend/saas-portal-web/src/components/conenter/addenterprise.vue

@@ -5,7 +5,7 @@
             <div class="tc-text"><span>添加企业成功</span></div>
         </div>
         <div>
-            <div class="gs-worp qy-worp tj-up">
+            <div class="gs-worp qy-worp tj-up" @click="hieadlookup">
                 <div class="qy-title" style="position: relative;">
                     <ul class="over">
                         <li class="left xs" v-for="(d, i) in tab" :key="i" :class= "{qyactive:nowindex == i}" @click="tabwatch(i)">{{d.name}}</li>
@@ -15,8 +15,8 @@
                     <ul style="padding:0;text-align: center;">
                         <li>
                             <span class="qy-biaoti"><span class="xingxing">*</span>企业名称</span>
-                            <input autofocus class="inpind" ref="qyname" @change= "spaceName" type="text" :class= "{showborder:qymingzi&&isspaceName&&isspaceNameempty}" placeholder="请填写企业全称">
-                            <div class="qy-Tips Tips-buttom"><span ref="qyno" style="color:red"></span></div>
+                            <input class="inpind" ref="qyname" @change= "spaceName" @focus="heidqyname1" @blur="showqyname1" type="text" :class= "{showborder:qymingzi&&isspaceName&&isspaceNameempty}" placeholder="请填写企业全称">
+                            <div v-show="isqyname1" class="qy-Tips Tips-buttom"><span ref="qyno" style="color:red"></span></div>
                         </li>
                         <li>
                             <span class="qy-biaoti">所属行业</span>
@@ -43,25 +43,25 @@
                         </li>
                         <li>
                             <span class="qy-biaoti"><span class="xingxing">*</span>企业地址</span>
-                            <input ref="address" @change="address" class="inpind" type="text" :class= "{showborder:isaddress&&isaddressname}" placeholder="输入企业详细地址">
+                            <input ref="address" @blur="address" @focus="heidqyaddress" class="inpind" type="text" :class= "{showborder:isaddress&&isaddressname}" placeholder="输入企业详细地址">
                             <!-- <div class="addbiaoqian">
                                 <v-distpicker @selected= 'selected' @province= 'qyprovince' :placeholders= 'placeholder'></v-distpicker>
                                 <input ref="address" @change="address" class="qy-xiangxi" type="text" placeholder="输入企业详细地址">
                             </div> -->
-                            <div class="qy-Tips Tips-buttom">
+                            <div v-show="isqyaddress" class="qy-Tips Tips-buttom">
                                 <span ref="ress" style="color:red"></span>
                             </div>
                         </li>
                         <li>
                             <span class="qy-biaoti"><span class="xingxing">*</span>您的姓名</span>
-                            <input class="inpind" @change= "yzusername" ref="name" :class= "{showborder:isname&&isnameempty}" type="text" value="" placeholder="请输入姓名">
-                            <div class="qy-Tips Tips-buttom"><span ref="usname" style="color:red"></span></div>
+                            <input class="inpind" @blur= "yzusername" @focus="heidyzusername" ref="name" :class= "{showborder:isname&&isnameempty}" type="text" value="" placeholder="请输入姓名">
+                            <div v-show="isyzusername" class="qy-Tips Tips-buttom"><span ref="usname" style="color:red"></span></div>
                         </li>
                         <li><span class="qy-biaoti">手机号</span><span class="qy-mobile industry">{{mytoken.account.mobile}}</span></li>
                         <li style="margin-bottom: 64px;">
                             <span class="qy-biaoti">邮箱</span>
-                            <input class="inpind" @change="email" ref="email" :class= "{showborder:isemail}" type="email" value="">
-                            <div class="qy-Tips Tips-buttom"><span style="color:red" v-html="Email"></span></div>
+                            <input class="inpind" @blur="email" @focus="heidemail" ref="email" :class= "{showborder:isemail}" type="email" value="">
+                            <div v-show="isheidemail" class="qy-Tips Tips-buttom"><span style="color:red" v-html="Email"></span></div>
                         </li>
                         <li>
                             <div class="qy-anniu">
@@ -75,15 +75,15 @@
                     <ul style="padding:0;position: relative;">
                         <li>
                             <span class="qy-biaoti"><span class="xingxing marght">*</span>查找企业</span>
-                            <input @input="Testingqyname" ref="lookupqyname" class="inpind" type="text"  placeholder="输入企业名称或管理员">
-                            <span class="warning" ref="warningqyname"></span>
+                            <input @input="Testingqyname" @focus="Testingqyname" @blur="showwarning" ref="lookupqyname" class="inpind" :class= "{showborder:isgsname}" type="text"  placeholder="输入企业名称或管理员">
+                            <span v-show="iswarning" class="warning" ref="warningqyname"></span>
                         </li>
                         <!-- 匹配企业后显示的内容 -->
                         <!-- <li v-if="isqylist" class="hied" :class= "{showlookup:islookup}"> -->
-                            <div class="lookup hied" :class= "{showlookup:islookup}">
+                            <div class="lookup hied" :class= "{showlookup:islookup}" @click.stop>
                                 <ul>
                                     <li v-for="(d, i) in arr" :key="i" @click="qylist(i)" :class="{'hui':newindex === i}">
-                                        <span>{{d.adminMobile}}</span>
+                                        <!-- <span>{{d.adminMobile}}</span> -->
                                         <span>{{d.admin}}</span>
                                         <span>{{d.name}}</span>
                                     </li>
@@ -92,11 +92,11 @@
                         <!-- </li> -->
                         <li>
                             <span class="qy-biaoti"><span class="xingxing marght">*</span>姓<span style="width:2em;display: inline-block;"></span>名</span>
-                            <input @blur.prevent="Testingname" class="inpind" type="text" ref="lookupname" placeholder="输入真实姓名，待管理员审核">
-                            <span class="warning" ref="warningname"></span>
+                            <input @blur.prevent="Testingname" @focus="showTestname" class="inpind" type="text" :class= "{showborder:isTestingname&&isregname}" ref="lookupname" placeholder="输入真实姓名，待管理员审核">
+                            <span v-show="isTestname" class="warning" style="width:110px" ref="warningname"></span>
                         </li>
                         <li>
-                            <div class="qy-anniu" style="margin-top: 70px;">
+                            <div class="qy-anniu" style="margin-top: 90px;">
                                 <span @click="Submission" class="qy-xiugai dianji" style="left: 0;">提交</span>
                                 <span @click= "tjquxiao" class="qy-quxiao xs">取消</span>
                             </div>
@@ -148,6 +148,12 @@ import { setTimeout, clearTimeout } from 'timers';
                 isgsname:false,
                 arr:[],
                 times:null,
+                iswarning:false,//加入企业提示语
+                isTestname:false,//加入企业姓名提示音
+                isqyname1:false,
+                isqyaddress:false,//地址
+                isyzusername:false,
+                isheidemail:false,
             }
         },
         components:{
@@ -213,8 +219,20 @@ import { setTimeout, clearTimeout } from 'timers';
                     }
                 }
             },
+            //隐藏企业1提示语
+            heidqyname1(){
+                this.isqyname1 = false;
+            },
+            showqyname1(){
+                this.isqyname1 = true;
+                let qyname = this.$refs.qyname.value.replace(/\s+/g, "");//公司名字过滤空格
+                if(qyname == ''){
+                    this.$refs.qyno.innerHTML = ' <img style="width:14px" src="/static/img/warning.png" alt=""> 企业名称不能为空';
+                }
+            },
             //检测企业名称2
             Testingqyname(){
+                this.iswarning = false;//提示语隐藏
                 let qyname = this.$refs.lookupqyname.value.replace(/\s+/g, "");//企业名字
                 let token = this.mytoken.token;
                 clearTimeout(this.times);
@@ -237,7 +255,7 @@ import { setTimeout, clearTimeout } from 'timers';
                             if (res.data.success) {
                                 this.newindex = '';
                                 this.arr = res.data.data;
-                                this.$refs.warningqyname.innerHTML = '<img style="width:14px" src="/static/img/ok.png" alt="">';
+                                this.$refs.warningqyname.innerHTML = '';
                                 this.islookup = true;
                                 this.companyId = null;
                                 this.isgsname = true;//公司是否存在
@@ -254,8 +272,13 @@ import { setTimeout, clearTimeout } from 'timers';
                     },500)
                 }
             },
+            //企业名称2提示语显示
+            showwarning(){
+                this.iswarning = true;
+            },
             //验证个人姓名1
             yzusername(){
+                this.isyzusername = true;
                 let name = this.$refs.name.value.replace(/\s+/g, "");//姓名过滤空格
                 if (name == '') {
                     this.$refs.usname.innerHTML = '<img style="width:14px" src="/static/img/warning.png" alt=""> 个人姓名不能为空';
@@ -271,8 +294,12 @@ import { setTimeout, clearTimeout } from 'timers';
                     }
                 }
             },
+            heidyzusername(){
+                this.isyzusername = false;
+            },
             //验证个人姓名2
             Testingname(){
+                this.isTestname = true;
                 let name = this.$refs.lookupname.value.replace(/\s+/g, "");//姓名过滤空格
                 if (name == '') {
                     this.$refs.warningname.innerHTML = '<img style="width:14px" src="/static/img/warning.png" alt=""> 姓名不能为空';
@@ -288,6 +315,10 @@ import { setTimeout, clearTimeout } from 'timers';
                     }
                 }
             },
+            //个人姓名2提示语显示
+            showTestname(){
+                this.isTestname = false;
+            },
             // 选择要加入的企业
             qylist(i){
                 this.companyId = this.arr[i].id,
@@ -297,8 +328,15 @@ import { setTimeout, clearTimeout } from 'timers';
                 this.islookup = false;
                 if (this.admin == this.mytoken.account.realname) {
                     this.$refs.warningqyname.innerHTML = '<img style="width:14px" src="/static/img/warning.png" alt=""> 账号已在企业服务中，不能重复加入';
+                } else {
+                    this.$refs.warningqyname.innerHTML = '<img style="width:14px" src="/static/img/ok.png" alt="">';
+                    // this.$refs.lookupqyname.style.border = '1px solid #1E88F5';
                 }
             },
+            //隐藏企业列表
+            hieadlookup(){
+                this.islookup = false;
+            },
             //加入企业提交按钮
             Submission(){
                 let token = this.mytoken.token;
@@ -347,6 +385,7 @@ import { setTimeout, clearTimeout } from 'timers';
             },
             //验证公司详细地址
             address(){
+                this.isqyaddress = true;
                 let address = this.$refs.address.value.replace(/\s+/g, "");//过滤空格
                 if (address == '') {
                     this.$refs.ress.innerHTML = '<img style="width:14px" src="/static/img/warning.png" alt=""> 企业地址不能为空';
@@ -362,7 +401,12 @@ import { setTimeout, clearTimeout } from 'timers';
                     }
                 }
             },
+            //地址提示隐藏
+            heidqyaddress(){
+                this.isqyaddress = false;
+            },
             email(){
+                this.isheidemail = true;
                 let reg = new RegExp("^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$"); 
                 let email = this.$refs.email.value;//邮箱
                 if (email == '') {
@@ -378,6 +422,9 @@ import { setTimeout, clearTimeout } from 'timers';
                     }
                 }
             },
+            heidemail(){
+                this.isheidemail = false;
+            },
             //保存
             Preservation(){
                 this.listLoading = true;
@@ -550,8 +597,8 @@ import { setTimeout, clearTimeout } from 'timers';
     background: #f5f4f4
 }
 .lookup > ul {
-    max-height: 170px;
-    overflow-y: scroll;
+    max-height: 140px;
+    overflow-y: auto;
 }
 .qy-mobile {
     display: inline-block;

frontend/saas-portal-web/src/components/conenter/company.vue

@@ -67,7 +67,7 @@
                     </div>
                 </router-link>
             </div>
-            <div v-for="(d , i) in list " :key="i" class="gs-xiangqing gs-list">
+            <div v-for="(d , i) in arr " :key="i" class="gs-xiangqing gs-list">
                 <!-- 上 -->
                 <div class="gs-shang">
                     <el-dropdown v-if= "d.saas_" trigger="hover" size="mini" placement='bottom-start'>
@@ -91,7 +91,7 @@
                 <!-- 下 -->
                 <div class="gs-xqright over">
                     <div v-if= "d.saas_" class="gs-xqright-left left" style="margin-top: 5%;width:67%">
-                        <p><span>saas管理员：</span>{{d.admin}}</p>
+                        <p><span>管理员：</span>{{d.admin}}</p>
                         <p><span>联系方式：</span>{{d.adminMobile}}</p>
                         <!-- <p><span>开通日期：</span></p> -->
                     </div>
@@ -102,6 +102,15 @@
                 </div>
             </div>
         </div>
+        <div style="text-align: center;">
+            <el-pagination
+                background
+                :page-size= size
+                @current-change="handleCurrentChange"
+                layout="prev, pager, next"
+                :total= list.length>
+            </el-pagination>
+        </div>
     </div>
 </template>
 
@@ -122,9 +131,11 @@
                 isAutoLogin: this.$store.state.isAutoLogin,
                 mytoken: Session.get(),//本地储存的用户信息
                 list: [],//企业列表信息
+                arr:[],
                 isheigh:false,//是否添加默认高度
                 admin: '',
                 adminMobile: '',
+                size:11,
             }
         },
         computed :{
@@ -143,6 +154,7 @@
             let mytoken = Session.get();
             let token = String(mytoken.token);
             //企业列表
+            this.$store.state.isloading = true;
             this.$ajax({
                     url: this.$url.api+"/api/account/accountCenter/company/list",//http://192.168.253.41:8560
                     method: 'get',
@@ -155,9 +167,11 @@
                     }
                 })
                 .then(res=>{
+                    this.$store.state.isloading = false;
                     if (res.data.success) {
                         const frame = window.frames[window.frames.length - 1];
                         this.list = res.data.data.spaces;
+                        this.pagingtion(1,this.size);
                         let enterprise = [];
                         for (let i = 0; i < this.list.length; i++) {
                             if (this.list[i].saas_) {
@@ -200,6 +214,22 @@
             this.boxheight();
         },
         methods: {
+            //分页
+            handleCurrentChange(val){
+                document.documentElement.scrollTop = 0;
+                this.pagingtion(val,this.size);
+            },
+            //分页函数
+            pagingtion(min,max){
+                //定义一个空数组存放分割的数据
+                this.arr = [];
+                //对源数组进行分割
+                let list = this.list.concat().splice(min * max - max, max);
+                //循环插入新数组中进行展示
+                for (let i = 0; i < list.length; i++) {
+                    this.arr.push(list[i]);
+                }
+            },
             //设置默认企业
             showDefaultWin(i){
                 this.index = i;

frontend/saas-portal-web/src/components/conenter/enterprise.vue

@@ -77,11 +77,11 @@
                 </div>
     <!-- 个人信息------------------------------------------------------------------- -->
                 <div :class= "{gsqiye:nowindex == 1}">
-                    <div v-if="ismodifyname" class="over gr-worp" style="margin-bottom: 30px;">
+                    <div v-if="ismodifyname" class="over gr-worp" style="margin-bottom: 100px;">
                         <div class="left gr-left">
                             <img src="/static/img/qiye/yonghu@2x.png" alt="">
                         </div>
-                        <div class="left gr-right">
+                        <div class="left gr-right" style="margin-bottom: 50px;">
                             <ul>
                                 <li>
                                     <span>姓名</span>
@@ -101,7 +101,7 @@
                         </div>
                     </div>
                     <!-- 修改页面 -->
-                    <div v-else class="over gr-worp" style="margin-bottom: 30px;">
+                    <div v-else class="over gr-worp" style="margin-bottom: 100px;">
                         <div class="left gr-left">
                             <img src="/static/img/qiye/yonghu@2x.png" alt="">
                         </div>
@@ -148,11 +148,11 @@
                     </div>
                 </div>
     <!-- 消息 ------------------------------------------------------------------>
-                <div :class="{gsqiye:nowindex == 3}">
+                <div :class="{gsqiye:nowindex == 3}" style="margin-top: 40px;">
                     <div class="gs-news" ref="qiyebox" :class="isheigh ? 'heigh' : ''">
                         <ul>
                             <li>
-                                <span>消息类型</span>
+                                <!-- <span>消息类型</span>
                                 <span>时间</span>
                                 <span class="newscentent" style="position: relative;top: 7px;">
                                     <span>消息内容</span>
@@ -160,11 +160,23 @@
                                     <span>联系方式</span>
                                 </span>
                                 <span>状态</span>
-                                <span>操作</span>
+                                <span>操作</span> -->
+                                <span>内容</span>
+                                <span>状态</span>
+                                <span>时间</span>
                             </li>
-                            <li v-if="isnews" class="newslist" v-for="(d, i) in arr" :key="i">
-                                <span>加入申请</span>
+                            <li v-if="isnews" class="newslist" v-for="(d, i) in arr" :key="i" :class="{newslist2:i%2==0}">
+                                <span>
+                                    <span>申请加入</span>
+                                    <span style="color: #1E88F5;">【{{d.companyName}}】</span>
+                                    <span>管理员-{{d.admin}}</span>
+                                    <span>{{d.adminMobile}}</span>
+                                </span>
+                                <span v-if='d.status == 0' style="color: #FF3900;">未通过</span>
+                                <span v-else-if='d.status == 1' style="color: #3CC600;">已通过</span>
+                                <span v-else-if='d.status == 2' style="color: #1E88F5;">待批准</span>
                                 <span>{{d.createTime}}</span>
+                                <!-- <span>{{d.createTime}}</span>
                                 <span class="newscentent" style="position:relative;top:9px">
                                     <span>{{d.companyName}}</span>
                                     <span>{{d.admin}}</span>
@@ -173,7 +185,7 @@
                                 <span v-if='d.status == 0' style="color: #FF3900;">未通过</span>
                                 <span v-else-if='d.status == 1' style="color: #3CC600;">已通过</span>
                                 <span v-else-if='d.status == 2' style="color: #1E88F5;">待批准</span>
-                                <span><button v-if="d.status == 0" @click="Rejoin(i)" class="news-btn">重新加入</button></span>
+                                <span><button v-if="d.status == 0" @click="Rejoin(i)" class="news-btn">重新加入</button></span> -->
                             </li>
                             <li v-if="!isnews" class="wushuju">
                                 <img src="/static/img/zanwushuju2x.png" alt="">
@@ -468,6 +480,10 @@ import { setTimeout } from 'timers';
 /* ele常见问题 */
 .el-menu-demo {
     border-bottom: 0 !important;
+    padding: 0px 10px !important;
+}
+.el-submenu {
+    padding: 0px 10px !important;
 }
 .el-menu-demo >>> div {
     font-size: 16px !important;
@@ -477,7 +493,7 @@ import { setTimeout } from 'timers';
     background: #1C1F48 !important;
 }
 .el-menu-demo >>> .el-submenu__title {
-    padding: 0px 0px 0px 10px !important;
+    padding: 0px !important;
     height: 48px !important;
     line-height: 48px !important;
     border-bottom: 0 !important;
@@ -531,8 +547,8 @@ import { setTimeout } from 'timers';
 
 /* 消息 */
 .gs-news {
-    width: 130%;
-    margin-left: -15%;
+    /* width: 130%;
+    margin-left: -15%; */
 }
 .gs-news > img {
     width: 100%
@@ -548,22 +564,23 @@ import { setTimeout } from 'timers';
     font-size: 14px;
     color: #243A52;
     font-weight: 600;
-    padding: 0px 10px;
+    padding: 0px 0px 0px 25px;
 }
 .gs-news > ul > li > span {
     display: inline-block;
-    text-align: center;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
-.gs-news > ul > li > span:nth-child(1),
-.gs-news > ul > li > span:nth-child(4),
-.gs-news > ul > li > span:nth-child(5) {
-    width: 10%;
+.gs-news > ul > li > span:nth-child(1) {
+    width: 58%;
 }
 .gs-news > ul > li > span:nth-child(2) {
-    width: 23%;
+    width: 20%;
 }
 .gs-news > ul > li > span:nth-child(3) {
-    width: 43%;
+    width: 20%;
 }
 .newscentent {
     text-align: left !important;
@@ -575,17 +592,14 @@ import { setTimeout } from 'timers';
     text-overflow:ellipsis;
     white-space: nowrap;
 }
-.newscentent span:nth-child(2),
-.newscentent span:nth-child(3) {
-    text-align: center;
-}
 .newslist {
     background: #FFFFFF;
-    border: 1px solid rgba(30,136,245,0.32);
-    box-shadow: 0 20px 60px 8px #F4F8FC;
-    border-radius: 4px;
-    margin: 24px 0px;
-    padding: 30px 10px;
+    height: 40px;
+    padding: 0px 0px 0px 25px;
+    line-height: 40px;
+}
+.newslist2 {
+    background: #F4F8FC;
 }
 .news-btn {
     background: #1E88F5;

frontend/saas-portal-web/src/components/conenter/home.vue

@@ -491,6 +491,10 @@
 /* ele常见问题 */
 .el-menu-demo {
     border-bottom: 0 !important;
+    padding: 0px 10px !important;
+}
+.el-submenu {
+    padding: 0px 10px !important;
 }
 .el-menu-demo >>> div {
     font-size: 16px !important;
@@ -501,7 +505,7 @@
     background: #1C1F48 !important;
 }
 .el-menu-demo >>> .el-submenu__title {
-    padding: 0px 0px 0px 10px !important;
+    padding: 0px !important;
     height: 48px !important;
     line-height: 48px !important;
     border-bottom: 0 !important;

frontend/saas-portal-web/src/pages/index/index.js

@@ -11,11 +11,11 @@ Vue.use(ElementUI);
 
 Axios.defaults.withCredentials=true;
 Axios.interceptors.request.use(function (config) {
-  store.state.isloading = true;
+  // store.state.isloading = true;
   return config;
 })
 Axios.interceptors.response.use(function (config) {
-  store.state.isloading = false
+  // store.state.isloading = false
   return config;
 })
 Vue.prototype.$ajax = Axios;

frontend/saas-portal-web/static/css/gongsi.css

@@ -419,22 +419,22 @@ input::-webkit-input-placeholder {
     text-align: center;
 }
 .jr-conent input {
-    width: 30%;
+    width: 43%;
     padding-left: 10px;
 }
 .hied {
     display: none;
 }
 .lookup {
-    width: 80%;
+    width: 43%;
     background: #FFFFFF;
     border: 1px solid #1E88F5;
     border-radius: 2px;
     text-align: left;
     position: absolute;
     z-index: 1;
-    top: 40px;
-    left: 50%;
+    top: 31px;
+    left: 58.3%;
     transform: translate(-50%, 0%);
 }
 .showlookup {
@@ -444,7 +444,7 @@ input::-webkit-input-placeholder {
     padding: 0;
 }
 .lookup > ul > li {
-    padding: 5px 20px;
+    padding: 5px 8px;
     margin-bottom: 0 !important;
     overflow: hidden;
 } 
@@ -456,17 +456,14 @@ input::-webkit-input-placeholder {
     float: right;
 } 
 .lookup > ul > li span:nth-child(1) {
-    width: 20%;
-    text-align: right;
+    width: 26%;
 }
 .lookup > ul > li span:nth-child(2) {
-    width: 30%;
-    text-align: center;
-} 
-.lookup > ul > li span:nth-child(3) {
-    width: 48%;
-    text-align: left;
+    width: 74%;
 } 
+/* .lookup > ul > li span:nth-child(3) {
+    width: 40%;
+}  */
 .saasguanli {
     width: 18% !important;
 }

frontend/saas-portal-web/static/css/main.css

@@ -453,15 +453,15 @@ main > section {
 
 
 .friend-link{
-    height: 100px;
+    height: 48px;
     background: #14152D;
     width: 100%;
-    line-height: 100px;
+    line-height: 48px;
     text-align: center;
 }
 .friend-link span {
     font-family: PingFangSC-Regular;
-    font-size: 16px;
+    font-size: 14px;
     color: #7C93AD;
     letter-spacing: 0;
     text-align: center;