Browse Source

修改样式

jinsy 7 years ago
parent
commit
9b2cc1d7d7

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

@@ -15,13 +15,13 @@
                     <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" placeholder="请填写企业全称">
+                            <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>
                         </li>
                         <li>
                             <span class="qy-biaoti">所属行业</span>
-                            <select ref="qyindustry" style="width:35%;height: 32px;padding-left:5px" name="selectAge" id="selectAge">   
-                                <option value="">请选择所属行业</option>
+                            <select @change="industry" ref="qyindustry" class="industry border" style="padding-left:5px" name="selectAge" id="selectAge">   
+                                <option value="" disabled selected hidden>请选择所属行业</option>
                                 <option value="贸易零售">贸易零售</option>
                                 <option value="制造加工">制造加工</option>
                                 <option value="服务业">服务业</option>
@@ -43,7 +43,7 @@
                         </li>
                         <li>
                             <span class="qy-biaoti"><span class="xingxing">*</span>企业地址</span>
-                            <input ref="address" @change="address" class="inpind" type="text" placeholder="输入企业详细地址">
+                            <input ref="address" @change="address" 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="输入企业详细地址">
@@ -54,13 +54,13 @@
                         </li>
                         <li>
                             <span class="qy-biaoti"><span class="xingxing">*</span>您的姓名</span>
-                            <input class="inpind" @change= "yzusername" ref="name" type="text" value="" placeholder="请输入姓名">
+                            <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>
                         </li>
-                        <li><span class="qy-biaoti">手机号</span><span class="qy-mobile">{{mytoken.account.mobile}}</span></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" type="email" value="">
+                            <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>
                         </li>
                         <li>
@@ -126,7 +126,9 @@ import { setTimeout, clearTimeout } from 'timers';
                 isaddress: false,//公司地址验证
                 isaddressname: false,//公司地址是否为空
                 isname: true,//姓名验证
+                isnameempty:false,//姓名是否为空
                 isspaceName: false,//公司名验证
+                isspaceNameempty:false,//公司名是否为空
                 isemail: true,//验证邮箱
                 // disabled: true,
                 isadd: false,//添加成功弹窗
@@ -145,20 +147,33 @@ import { setTimeout, clearTimeout } from 'timers';
                 admin:null,
                 isgsname:false,
                 arr:[],
-                times:null
+                times:null,
             }
         },
         components:{
             // VDistpicker
         },
         mounted(){
-            this.$refs.name.value = this.mytoken.account.realname;
-            this.$refs.email.value = this.mytoken.account.email;
+            if (this.mytoken.account.realname) {
+                this.$refs.name.value = this.mytoken.account.realname;
+                this.isnameempty = true;
+            } else {
+                this.$refs.name.value = '';
+            };
+            if (this.mytoken.account.email) {
+                this.$refs.email.value = this.mytoken.account.email;
+            } else {
+                this.$refs.email.value = '';
+            }
         },
         methods: {
             tabwatch(i){
                 this.nowindex = i;
             },
+            // 行业
+            industry(){
+                this.$refs.qyindustry.style.border = '1px solid #1E88F5'
+            },
             //取消添加企业
             tjquxiao(){
                 document.documentElement.scrollTop = 0;
@@ -169,7 +184,9 @@ import { setTimeout, clearTimeout } from 'timers';
                 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=""> 企业名称不能为空';
+                    this.isspaceNameempty = false;
                 } else {
+                    this.isspaceNameempty = true;
                     if (this.reg.test(qyname)) {
                         this.$refs.qyno.innerHTML = ' <img style="width:14px" src="/static/img/warning.png" alt=""> 不能包含符号等非法字符';
                         this.isspaceName = false;
@@ -242,7 +259,9 @@ import { setTimeout, clearTimeout } from 'timers';
                 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=""> 个人姓名不能为空';
+                    this.isnameempty = false;
                 } else {
+                    this.isnameempty = true;
                     if (this.reg.test(name)) {
                         this.$refs.usname.innerHTML = '<img style="width:14px" src="/static/img/warning.png" alt=""> 不能包含符号等非法字符';
                         this.isname = false;
@@ -459,6 +478,9 @@ import { setTimeout, clearTimeout } from 'timers';
     padding-bottom: 1px;
     border-radius: 4px 4px 0 0;
     /* margin-top: -30px; */
+    border: 1px solid #EEEEEE;
+    box-shadow: 0 20px 60px 10px rgba(13,37,62,0.05);
+    border-radius: 4px;
 }
 .tj-up li {
     margin-bottom: 26px;
@@ -497,6 +519,7 @@ import { setTimeout, clearTimeout } from 'timers';
 }
 .qyactive {
     border-bottom: 3px solid  #1E88F5;
+    color: #243A52;
 }
 .qy-conent {
     display: none;
@@ -532,7 +555,6 @@ import { setTimeout, clearTimeout } from 'timers';
 }
 .qy-mobile {
     display: inline-block;
-    width: 35%;
     text-align: left;
 }
 .qy-anniu > span {

+ 1 - 1
frontend/saas-portal-web/src/components/conenter/details.vue

@@ -48,7 +48,7 @@
                         </li>
                         <li>
                             <span class="qy-biaoti">所属行业</span>
-                            <select ref="qyindustry" style="width:35%;height: 32px" name="selectAge" id="selectAge">   
+                            <select ref="qyindustry" class="industry border" name="selectAge" id="selectAge">   
                                 <option value="">请选择所属行业</option>
                                 <option value="贸易零售">贸易零售</option>
                                 <option value="制造加工">制造加工</option>

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

@@ -33,7 +33,7 @@
                         </a>
                     </h1>
                 </div>
-            <div class="collapse navbar-collapse navbar-right" role="navigation" style="position: absolute;left: 38%;">
+            <div class="collapse navbar-collapse navbar-right" role="navigation" style="position: absolute;left: 35%;">
             <ul @click="gohome" id="nav" class="nav navbar-nav menu">
                 <li><router-link to="/home"><a @click="setTurnHome"><span style="color: white">首页</span></a></router-link></li>
                 <li><a href="#" @click="feature"><span>特色</span></a></li>
@@ -453,6 +453,10 @@ import { setTimeout } from 'timers';
 .div {
     padding-top: 140px;
     background: #FDFDFD;
+    background-image: url(/static/img/Pattern@2x@2x.png);
+    /* background-size: 110%; */
+    padding-bottom: 1px;
+    /* background-position-y: 80px; */
 }
 .heigh {
     height: 500px;
@@ -461,22 +465,26 @@ import { setTimeout } from 'timers';
     margin-bottom: 100px;
 }
 
-
+/* ele常见问题 */
 .el-menu-demo {
-    border-bottom: 0;
+    border-bottom: 0 !important;
 }
 .el-menu-demo >>> div {
     font-size: 16px !important;
-    background: #1C1F48;
+    background: #1C1F48 !important;
 }
 .el-menu-demo >>> .el-submenu__title:hover {
     background: #1C1F48 !important;
 }
 .el-menu-demo >>> .el-submenu__title {
-    padding: 0px 0px 0px 10px;
-    height: 48px;
-    line-height: 48px;
-    border-bottom: 2px solid #409EFF;
+    padding: 0px 0px 0px 10px !important;
+    height: 48px !important;
+    line-height: 48px !important;
+    border-bottom: 0 !important;
+}
+.el-menu-item:hover {
+    /* color: green !important; */
+    background: #1E88F5 !important;
 }
 .modifyname {
     margin-left: 80px;

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

@@ -42,7 +42,7 @@
                     </a>
                 </h1>
             </div>
-        <div class="collapse navbar-collapse navbar-right" role="navigation" style="position: absolute;left: 38%;">
+        <div class="collapse navbar-collapse navbar-right" role="navigation" style="position: absolute;left: 35%;">
           <ul @click="gohome" id="nav" class="nav navbar-nav menu">
             <li><a href="#" @click="setTurnHome"><span>首页</span></a></li>
             <li>
@@ -490,22 +490,26 @@
 }
 /* ele常见问题 */
 .el-menu-demo {
-    border-bottom: 0;
+    border-bottom: 0 !important;
 }
 .el-menu-demo >>> div {
     font-size: 16px !important;
-    background: #1C1F48;
+    background: #1C1F48 !important;
     border-bottom: 0 !important;
 }
 .el-menu-demo >>> .el-submenu__title:hover {
     background: #1C1F48 !important;
 }
 .el-menu-demo >>> .el-submenu__title {
-    padding: 0px 0px 0px 10px;
-    height: 48px;
-    line-height: 48px;
+    padding: 0px 0px 0px 10px !important;
+    height: 48px !important;
+    line-height: 48px !important;
     border-bottom: 0 !important;
 }
+.el-menu-item:hover {
+    /* color: green !important; */
+    background: #1E88F5 !important;
+}
 /* 体验 */
 .tiyan {
   position: fixed;

+ 24 - 4
frontend/saas-portal-web/static/css/gongsi.css

@@ -16,9 +16,15 @@
 .over {
     overflow: hidden;
 }
+input::-webkit-input-placeholder {
+    color: #BCC8D8; 
+} 
+
 /* ele常见问题 ---------------------- */
 .el-menu--popup {
-    min-width: 120px !important;
+    min-width: 96px !important;
+    padding: 0 !important;
+    text-align: center !important;
 }
 /* 弹窗 -----------------------------------------------*/
 .tanchuang {
@@ -238,9 +244,22 @@
     text-align: center;
 }
 .qy-conent input {
-    border: 1px solid #1E88F5;
-    width: 35%;
+    /* border: 1px solid #1E88F5; */
+    width: 37%;
     height: 32px;
+    box-shadow: 0 1px 4px 0 #BCC8D8;
+    border: 0;
+}
+.showborder {
+    border: 1px solid #1E88F5 !important;
+}
+.industry {
+    width: 37%;
+    height: 32px;
+}
+.border {
+    box-shadow: 0 1px 4px 0 #BCC8D8;
+    border: 0;
 }
 .tj-biaoqian {
     border: 1px dashed #7CBAFA;
@@ -344,7 +363,6 @@
     box-shadow: 0 20px 60px 8px #F4F8FC;
     border-radius: 4px;
     margin-bottom: 25px;
-    /* margin-top: -30px; */
 }
 .qy-title {
     background: #F4F8FC;
@@ -365,6 +383,8 @@
     padding: 0;
     width: 50%;
     text-align: center;
+    border-bottom: 1px solid #BCC8D8;
+    color: #BCC8D8;
 }
 .qy-xiugai {
     font-family: PingFangSC-Regular;

+ 4 - 0
frontend/saas-portal-web/static/css/main.css

@@ -390,6 +390,7 @@ main > section {
     font-size: 14px;
     color: #fff;
     cursor: pointer;
+    opacity: 0.9;
 }
 .footer-section ul>li:hover a{
     text-decoration: underline ;
@@ -516,6 +517,9 @@ h1.navbar-brand {
     text-transform: uppercase;
     /* font-weight: bold; */
 }
+.navbar-nav>li>a {
+    padding: 15px 20px 3px 20px !important;
+}
 .menu li a {
     display: inline-block;
 }

BIN
frontend/saas-portal-web/static/img/Pattern@2x.png


BIN
frontend/saas-portal-web/static/img/Pattern@2x@2x.png