|
@@ -1,162 +1,166 @@
|
|
|
-<template>
|
|
|
- <div class="login-register">
|
|
|
- <div class="title">
|
|
|
- <div class="title-logo">
|
|
|
- <img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/f9617c7f80da485cb3cc72b6accc62ed"
|
|
|
- alt="logo.png">
|
|
|
- <div class="title-name">WorkArk</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="content">
|
|
|
- <div class="content-left">
|
|
|
- <div class="content-title">
|
|
|
- <div class="sub-title">WorkArk</div>
|
|
|
- <div class="small-title">
|
|
|
- <span>项目申报</span>
|
|
|
- <span class="line"></span>
|
|
|
- <span>知识产权</span>
|
|
|
- <span class="line"></span>
|
|
|
- <span>网站建设</span>
|
|
|
- <span class="line"></span>
|
|
|
- <span>推广宣传</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="content-image"></div>
|
|
|
- </div>
|
|
|
- <div class="content-right">
|
|
|
- <transition name="slide-fade" mode="out-in">
|
|
|
- <router-view :key="key" />
|
|
|
- </transition>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- name: 'loginLayout',
|
|
|
- data() {
|
|
|
- return {};
|
|
|
- },
|
|
|
- computed: {
|
|
|
- key() {
|
|
|
- return this.$route.path;
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
- .login-register {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: url(https://file-node.oss-cn-shanghai.aliyuncs.com/youji/8ead21d2c7464ae99745e93f5a17e4d3) no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- overflow: auto;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- min-width: 1300px;
|
|
|
- min-height: 800px;
|
|
|
-
|
|
|
- .title {
|
|
|
- height: 64px;
|
|
|
- background: rgba(255, 255, 255, 0.36);
|
|
|
- box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
|
|
|
- padding-left: 46px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .title-logo {
|
|
|
- width: 245px;
|
|
|
- height: 34px;
|
|
|
- margin-right: 74px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- color: #484B50;
|
|
|
- }
|
|
|
-
|
|
|
- .title-sub-name {
|
|
|
- font-size: 12px;
|
|
|
- transform: scale(0.68) translateX(-66px);
|
|
|
- width: 282px;
|
|
|
- opacity: 0.75;
|
|
|
- }
|
|
|
-
|
|
|
- .title-name {
|
|
|
- font-family: hanyiyaku;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 22px;
|
|
|
- }
|
|
|
-
|
|
|
- .title-logo img {
|
|
|
- width: 34px;
|
|
|
- height: 34px;
|
|
|
- margin-right: 10px;
|
|
|
- border-radius: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- flex: 1;
|
|
|
- height: 0;
|
|
|
- width: 100%;
|
|
|
- overflow: auto;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .content-image {
|
|
|
- width: 640px;
|
|
|
- height: 440px;
|
|
|
- background: url(https://file-node.oss-cn-shanghai.aliyuncs.com/youji/2fdedc8660e146b7bb003ce85dedea5f) no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .content-left {
|
|
|
- width: 910px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- padding-left: 90px;
|
|
|
- }
|
|
|
-
|
|
|
- .content-right {
|
|
|
- width: 440px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .content-title {
|
|
|
- margin-bottom: 64px;
|
|
|
- }
|
|
|
-
|
|
|
- .sub-title {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 31px;
|
|
|
- color: #484B50;
|
|
|
- line-height: 44px;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .small-title {
|
|
|
- font-weight: 400;
|
|
|
- font-size: 16px;
|
|
|
- color: #333E4D;
|
|
|
- line-height: 22px;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .line {
|
|
|
- margin: 0 20px;
|
|
|
- width: 1px;
|
|
|
- height: 16px;
|
|
|
- background: #CBE0FF;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+<template>
|
|
|
+ <div class="login-register">
|
|
|
+ <div class="title">
|
|
|
+ <div class="title-logo">
|
|
|
+ <img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/f9617c7f80da485cb3cc72b6accc62ed"
|
|
|
+ alt="logo.png">
|
|
|
+ <div class="title-name">WorkArk企业服务平台</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="content-left">
|
|
|
+ <div class="content-title">
|
|
|
+ <div class="sub-title">WorkArk-企业服务在线交易与交付平台</div>
|
|
|
+ <div class="small-title">
|
|
|
+ <span>知识产权</span>
|
|
|
+ <span class="line"></span>
|
|
|
+ <span>项目申报</span>
|
|
|
+ <span class="line"></span>
|
|
|
+ <span>技术开发</span>
|
|
|
+ <span class="line"></span>
|
|
|
+ <span>营销推广</span>
|
|
|
+ <span class="line"></span>
|
|
|
+ <span>财税审计</span>
|
|
|
+ <span class="line"></span>
|
|
|
+ <span>企业标准</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-image"></div>
|
|
|
+ </div>
|
|
|
+ <div class="content-right">
|
|
|
+ <transition name="slide-fade" mode="out-in">
|
|
|
+ <router-view :key="key" />
|
|
|
+ </transition>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: 'loginLayout',
|
|
|
+ data() {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ key() {
|
|
|
+ return this.$route.path;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .login-register {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: url(https://file-node.oss-cn-shanghai.aliyuncs.com/youji/8ead21d2c7464ae99745e93f5a17e4d3) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ overflow: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ min-width: 1300px;
|
|
|
+ min-height: 800px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ height: 64px;
|
|
|
+ background: rgba(255, 255, 255, 0.36);
|
|
|
+ box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
|
|
|
+ padding-left: 46px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .title-logo {
|
|
|
+ width: 245px;
|
|
|
+ height: 34px;
|
|
|
+ margin-right: 74px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #484B50;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-sub-name {
|
|
|
+ font-size: 12px;
|
|
|
+ transform: scale(0.68) translateX(-66px);
|
|
|
+ width: 282px;
|
|
|
+ opacity: 0.75;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-name {
|
|
|
+ font-family: hanyiyaku;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-logo img {
|
|
|
+ width: 34px;
|
|
|
+ height: 34px;
|
|
|
+ margin-right: 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ flex: 1;
|
|
|
+ height: 0;
|
|
|
+ width: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .content-image {
|
|
|
+ width: 640px;
|
|
|
+ height: 440px;
|
|
|
+ background: url(https://file-node.oss-cn-shanghai.aliyuncs.com/youji/2fdedc8660e146b7bb003ce85dedea5f) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-left {
|
|
|
+ width: 910px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding-left: 90px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-right {
|
|
|
+ width: 440px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-title {
|
|
|
+ margin-bottom: 64px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-title {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 31px;
|
|
|
+ color: #484B50;
|
|
|
+ line-height: 44px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .small-title {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333E4D;
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .line {
|
|
|
+ margin: 0 20px;
|
|
|
+ width: 1px;
|
|
|
+ height: 16px;
|
|
|
+ background: #CBE0FF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|