添加立即体验交互效果，修改部分ui样式

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

@@ -14,7 +14,7 @@
                     <ul>
                         <li>
                             <span class="qy-biaoti"><span class="xingxing">*</span>公司名称</span>
-                            <input ref="qyname" @input= "spaceName" type="text">
+                            <input ref="qyname" @change= "spaceName" type="text">
                             <span ref="qyno" style="color:red"></span>
                         </li>
                         <li>
@@ -47,13 +47,13 @@
                     <ul>
                         <li>
                             <span class="qy-biaoti"><span class="xingxing">*</span>姓名</span>
-                            <input @input= "yzusername" ref="name" type="text">
+                            <input @change= "yzusername" ref="name" type="text">
                             <span ref="usname" style="color:red"></span>
                         </li>
                         <li><span class="qy-biaoti">手机号</span><span>{{mytoken.account.mobile}}</span></li>
                         <li>
                             <span class="qy-biaoti">邮箱</span>
-                            <input @input="email" ref="email" type="email">
+                            <input @change="email" ref="email" type="email">
                             <span style="color:red">{{Email}}</span>
                         </li>
                     </ul>
@@ -163,13 +163,13 @@ import VDistpicker from 'v-distpicker'
                         }
                     })
                     .then(res=>{
-                        console.log("请求成功"+res)
+                        console.log("请求成功",res)
                         document.documentElement.scrollTop = 0;
                         // this.$router.push({name:'company', params:{company:company,account:account}});
                         this.$router.push({name:'company'})
                     })
                     .catch(err=>{
-                        console.log("请求失败"+err)
+                        console.log("请求失败",err)
                     })
                 } else {
                     this.$refs.tjtishi.innerHTML = '企业名称或姓名不能为空'

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

@@ -12,7 +12,7 @@
                 </button>
                 <h1 class="navbar-brand">
                     <a href="#">
-                        <img class="logo-img" src="../../../static/img/assets/dalogo3x.png" alt="">
+                        <img class="logo-img" src="/static/img/assets/dalogo@2x_1.png" alt="">
                     </a>
                 </h1>
             </div>
@@ -21,8 +21,8 @@
                     <li><router-link to="/home"><a href="#"><span style="color: white">首页</span></a></router-link></li>
                     <li><a href="https://uas.usoftchina.com/about" target="_blank"><span>关于我们</span></a></li>
                     <li>
-                        <span style="color:#fff;font-size: 13px;">
-                            <img style="width: 25px;" src="/static/img/assets/denglu3x.png" alt="">
+                        <span style="color:#fff;font-size: 16px;">
+                            <img style="width: 24px;" src="/static/img/assets/denglu3x.png" alt="">
                             {{mytoken.realname}}
                         </span>
                         <a href=""><span @click="loginout">【退出】</span></a>

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

@@ -1,5 +1,10 @@
 <template>
     <div>
+      <div id="preloader" style="display:none">
+        <div class="loder-box">
+          <div class="battery"></div>
+        </div>
+      </div>
 		<div id="navigation" class="navbar-inverse navbar-fixed-top animated-header">
         <div class="container">
             <div class="navbar-header">
@@ -11,19 +16,20 @@
                 </button>
                 <h1 class="navbar-brand">
                     <a href="#">
-                        <img class="logo-img" src="/static/img/assets/dalogo3x.png" alt="">
+                        <img class="logo-img" src="/static/img/assets/dalogo@2x_1.png" alt="">
                     </a>
                 </h1>
             </div>
             <div class="collapse navbar-collapse navbar-right" role="navigation">
           <ul id="nav" class="nav navbar-nav menu">
             <li><a href="#"><span>首页</span></a></li>
-            <li @click="home">
+            <li><a href="https://www.usoftchina.com/" target="_blank"><span>优软云</span></a></li>
+            <li>
               <a href="#feature"><span>特色</span></a>
               <!-- <router-link to="/enterprise"><a href="#"><span>特色</span></a></router-link> -->
             </li>
             <li><a href="#service"><span>功能</span></a></li>
-            <li><a href="#prototype"><span>帮助中心</span></a></li>
+            <!-- <li><a href="#prototype"><span>帮助中心</span></a></li> -->
             <li><a href="https://uas.usoftchina.com/about" target="_blank"><span>关于我们</span></a></li>
             <li class="login" v-if="!account" style="margin-left: 20px;">
               <span @click="login"><img src="/static/img/assets/denglu3x.png" alt="">登录  &nbsp;</span>
@@ -35,7 +41,7 @@
 								<span id="user-info">{{account.realname || account.username}}</span>
 							</span>
               <span @click="loginout">【退出】</span>    |
-              <router-link to="/enterprise"><a href="#"><span style="color: white">账户管理</span></a></router-link>
+              <router-link to="/enterprise"><a href="#"><span style="color: white">账户中心</span></a></router-link>
             </li>
           </ul>
         </div>
@@ -52,15 +58,25 @@
           <img @click="closeModal" class="tc-on shut"
                src="/static/img/qiye/chahao.png" alt="">
         </div>
-        <iframe width="430" height="474" :src="ssoPage"></iframe>
+        <iframe id="iframe" width="430" height="474" :src="ssoPage"></iframe>
         <iframe hidden :src="setTokenPage"></iframe>
       </div>
+
+      <!-- 体验弹窗 -->
       <div class="tiyan" v-if="isexperience">
-        <img @click="Closeexperience" class="tc-on shut" src="/static/img/qiye/chahao.png" alt="" />
-        <div class="ty-title"><span>填写手机号后，可体验电子行业贸易版所有功能</span></div>
+        <img @click="Closeexperience" class="tc-on ty-out" src="/static/img/qiye/x.png" alt="" />
+        <div><img class="ty-logo" src="/static/img/assets/dalogo@2x.png" alt=""></div>
+        <div><p class="ty-logotxt">欢迎你访问U企云服</p></div>
+        <div class="ty-title"><span>填写手机号后，即刻体验电子行业贸易版所有功能</span></div>
         <div class="ty-phone over">
-          <div class="left"><input type="text" placeholder="请输入您的11位手机号"></div>
-          <button>立即申请试用</button>
+          <div class="left ty-input">
+            <span><img style="margin: 6px 8px 10px 15px;" src="/static/img/assets/phone.png" alt=""></span>
+            <input ref="typhone" type="text" placeholder="请输入您的11位手机号">
+          </div>
+          <div class="left" style="margin-left: 8px;"><button @click="experience1">立即试用</button></div>
+        </div>
+        <div style="text-align: left;">
+          <span class="Caution" ref="Caution"></span>
         </div>
         <div class="contact">
           <span>客服电话：400-830-1818</span>
@@ -102,49 +118,18 @@
             <p class="ts-text">云端部署 &nbsp;&nbsp; 轻量应用</p>
           </div>
           <div class="ts-box">
-            <div style="margin:50px 0;">
-              <!-- <img class="ts-img" src="/static/img/features.jpg" alt=""> -->
-              <img class="ts-img" src="/static/img/gongneng/chahua12x.png" alt="">
-            </div>
-            <div class="right right-text">
-              <img class="ts-minimg" src="/static/img/assets/1.png" alt="">
-              <div class="ts-mintext">
-                <p style="font-size: 32px !important;margin-bottom: 36px;"><img class="ts-textimg"
-                                                                                src="/static/img/assets/xunzhao@2x.png"
-                                                                                alt="">迅速找到您想要的</p>
-                <p>寻找供应商资源</p>
-                <p>寻找产品货源  寻找产品资料</p>
-              </div>
+            <div>
+              <img class="ts-img" src="/static/img/assets/1@2x.png" alt="">
             </div>
           </div>
           <div class="ts-box">
-            <div class="left left-text">
-              <img class="ts-minimg" style="left:0;" src="/static/img/assets/2.png" alt="">
-              <div class="ts-mintext ts-lefttext">
-                <p style="font-size: 32px !important;margin-bottom: 36px;">直观看到您想看的<img class="ts-textleftimg"
-                                                                                        src="/static/img/assets/fen xi@2x.png"
-                                                                                        alt=""></p>
-                <p>每日订单量、收付款、月度销售分析、采购分析</p>
-                <p>让你成为企业经营老司机</p>
-              </div>
-            </div>
-            <div style="margin:50px 0;">
-              <img class="ts-img" src="/static/img/gongneng/chahua22x.png" alt="">
+            <div>
+              <img class="ts-img" src="/static/img/assets/2@3x.png" alt="">
             </div>
           </div>
           <div class="ts-box">
-            <div style="margin:50px 0;">
-              <img class="ts-img" src="/static/img/gongneng/chahua32x.png" alt="">
-            </div>
-            <div class="right right-text">
-              <img class="ts-minimg" src="/static/img/assets/1.png" alt="">
-              <div class="ts-mintext" style="right: 145px;">
-                <p style="font-size: 32px !important;margin-bottom: 36px;"><img class="ts-textimg"
-                                                                                src="/static/img/assets/kuaisu@2x.png"
-                                                                                alt="">快速上手 生意简单做</p>
-                <p>移动端的交互体验</p>
-                <p>简短清晰的业务流程 让你三分钟上手</p>
-              </div>
+            <div>
+              <img class="ts-img" src="/static/img/assets/3@2x.png" alt="">
             </div>
           </div>
         </div>
@@ -249,7 +234,7 @@
       <!-- end Service section -->
 
       <!-- 帮助中心 -->
-      <section id="prototype">
+      <!-- <section id="prototype">
         <div class="container">
           <div class="row">
             <div class="section-title text-center">
@@ -266,8 +251,6 @@
               <div class="bz-content">
                 <div class="bz-left">
                   <ul class="bz-ul">
-                    <!-- <li class='active'>操作文档</li>
-                    <li>常见问题</li> -->
                     <li v-for="(d,i) in arr" :key="i" :class= "{active:Nowindex == i}" @click="tab(i)">{{d}}</li>
                   </ul>
                 </div>
@@ -317,7 +300,7 @@
             </div>
           </div>
         </div>
-      </section>
+      </section> -->
     </main>
   </div>
 </template>
@@ -325,6 +308,7 @@
 <script>
   import {subscribe, disconnect} from '@/api/socket'
   import Session from '@/utils/session'
+import { setTimeout } from 'timers';
 
   export default {
     data() {
@@ -421,7 +405,44 @@
       //关闭体验
       Closeexperience(){
         this.isexperience = false;
-      }
+      },
+      //进入体验
+      experience1(){
+        let me = this
+        let phone = this.$refs.typhone.value;
+        let reg = new RegExp('^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\\d{8}$')
+        if (phone == '') {
+          this.$refs.Caution.innerHTML = '号码不能为空'
+        } else {
+          if (!reg.test(phone)) {
+            this.$refs.Caution.innerHTML = '号码格式错误'
+            // setTimeout(()=>{
+            //   this.$refs.Caution.innerHTML = ''
+            // },2000)
+          } else {
+            this.$refs.Caution.innerHTML = ''
+            this.$ajax({
+              url: this.$url.api+'/api/auth/virtual/authorize/'+phone,
+              method: 'post',
+            })
+             .then(res=>{
+                const session = res.data.data.token, account = res.data.data.account
+                let companyId = account.companies[0].id
+                account.companies = account.companies || []
+                account.companyId=companyId;
+                session.account = account
+                const frame = window.frames[window.frames.length - 1]
+                frame.postMessage(JSON.stringify(session), '*')
+                window.location.href = me.$url.web
+                // console.log("请求成功",res)
+                phone = ''
+            })
+            .catch(err=>{
+                // console.log("请求失败",err)
+            })
+          }
+        } 
+      },
     }
   }
 </script>
@@ -440,10 +461,7 @@
   right: 10px;
 }
 .navbar-inverse {
-  /* padding: 3px; */
   padding: 0px;
-  /* height: 70px;
-  line-height: 70px; */
 }
 
 /* 体验 */
@@ -451,50 +469,76 @@
   position: fixed;
   top: 50%;
   left: 50%;
-	width: 400px;
-	height: 200px;
-	margin-left: -200px;
-  margin-top: -100px;
+	width: 640px;
+	height: 320px;
+	margin-left: -320px;
+  margin-top: -160px;
   z-index: 10001;
   background: white;
+  padding: 24px;
+  text-align: center;
+  border-radius: 2px;
 }
-.tiyan div {
-  height: 33%;
+.ty-out {
+    cursor: pointer;
+    float: right;
 }
-.ty-title {
-  text-align: center;
-  margin-top: 30px;
-  font-size: 18px;
-  font-weight: 600;
+.ty-logo {
+  width: 140px;
+  margin: 15px 0 10px 13px;
+}
+.ty-logotxt {
+  font-family: PingFangSC-Regular;
+  font-size: 22px !important;
+  color: #059FFE;
 }
-.ty-title span {
+.ty-title {
   margin-top: 30px;
-  display: inline-block;
+  font-family: PingFangSC-Regular;
+  font-size: 14px;
+  color: #059FFE;
+  text-align: center;
 }
-.ty-phone div {
-  width: 60%;
+.ty-input {
+  width: 330px;
   height: 40px;
-  border-radius: 20px;
-  border: 1px solid rgb(162, 151, 231);
   line-height: 40px;
-  margin: 0 10px;
+  text-align: left;
+  background: rgba(32,53,128,0.01);
+  border: 1px solid #D8DCE8;
+  border-radius: 3px;
+  margin-left: 69px;
+}
+.ty-phone {
+  margin: 8px 0;
+  margin-bottom: 0;
 }
 .ty-phone input{
   outline:none;
   border: 0;
   height: 30px;
-  margin-left: 10px;
+  font-size: 14px;
+  width: 80%;
 }
 .ty-phone button{
+  background-image: linear-gradient(-90deg, #007EE5 0%, #05B3FF 100%, #5533FF 100%);
+  border-radius: 3px;
   color: white;
-  width: 30%;
+  width: 125px;
   height: 40px;
-  border-radius: 20px;
-  background: rgb(162, 151, 231);
   border: 0;
 }
 .contact {
-    margin-left: 20px;
-    font-size: 18px;
+  font-family: PingFangSC-Regular;
+  font-size: 14px;
+  color: #059FFE;
+  text-align: center;
+}
+.Caution {
+  color: red;
+  margin-left: 110px;
+  font-size: 12px;
+  display: inline-block;
+  height: 16px;
 }
 </style>

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

@@ -273,7 +273,8 @@ main > section {
 /* 11/12注册页面 ..........................................*/
 .login,.profile {
     color: white;
-    font-size: 14px;
+    font-size: 16px;
+    /* font-weight: 600; */
 }
 .login {
     margin-top: 12px;
@@ -282,8 +283,8 @@ main > section {
    margin: 0 15px;
 }
 .login img,.profile img {
-    width: 25px;
-    height: 24px;
+    width: 24px;
+    margin-right: 5px;
 }
 .login > span:hover,.profile > span:hover{
     cursor:pointer;
@@ -322,7 +323,7 @@ main > section {
 /* 首页内容 ..........................................*/
 .my-text {
     position: absolute;
-    top: 70%;
+    top: 76%;
     left: 7%;
     /* z-index: 5; */
     /* width: 468px;
@@ -347,7 +348,7 @@ main > section {
 }
 .my-tiyan {
     background: #5172DD;
-    box-shadow: 0 0 19px 0 rgba(137,143,164,0.63);
+    /* box-shadow: 0 0 19px 0 rgba(137,143,164,0.63); */
     border-radius: 4px;
     width: 100px;
     height: 36px;
@@ -423,8 +424,7 @@ main > section {
     float: right;
 }
 .ts-img {
-    width: 108%;
-    height: 441px;
+    width: 100%;
 }
 .right-text {
     text-align: right;
@@ -922,11 +922,11 @@ main > section {
 
     background-color: rgba(0, 0, 0, 0.77);
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-    padding: 5px 0;
+    /* padding: 5px 0; */
 }
 
 #navigation.animated-header {
-    padding: 20px 0;
+    padding: 10px 0;
 }
 
 h1.navbar-brand {
@@ -938,9 +938,9 @@ h1.navbar-brand {
 
 .navbar-inverse .navbar-nav > li > a {
     color: #fff;
-    font-size: 13px;
+    font-size: 16px;
     text-transform: uppercase;
-    font-weight: bold;
+    /* font-weight: bold; */
 }
 .menu {
 
@@ -1003,9 +1003,9 @@ h1.navbar-brand {
     font-size: 40px;
     line-height: 1.5;
 }
-.slider-1  img{
+.slider-1 img{
     width: 100%;
-    height: 100%;
+    /* height: 100%; */
 }
 .sl-slider-wrapper {
     width: 100%;

frontend/saas-portal-web/static/js/mains.js

@@ -6,14 +6,6 @@ jQuery(window).load(function(){
 
     $("#preloader").fadeOut("slow");
 
-    // 帮助中心
-    // $(".bz-right-conent>div").eq(0).show()
-    // let abtn = $(".bz-ul").children('li').click(function(){
-    //     var _index = $(this).index();
-    //     //让内容框的第 _index 个显示出来，其他的被隐藏
-    //     $(".bz-right-conent>div").eq(_index).show().siblings().hide();
-    //     $(this).addClass("active").siblings().removeClass('active')
-    // });
 });
 
 /* ========================================================================= */
@@ -136,9 +128,12 @@ $(document).ready(function(){
 
     $('#home-slider, #slider, .sl-slider, .sl-content-wrapper').css('height',slideHeight);
 
-    $(window).resize(function(){'use strict',
+    $(window).resize(function(){
         $('#home-slider, #slider, .sl-slider, .sl-content-wrapper').css('height',slideHeight);
     });
+    // $(window).resize(function(){'use strict',
+    //     $('#home-slider, #slider, .sl-slider, .sl-content-wrapper').css('height',slideHeight);
+    // });