Skip to content

B
bigDataSystem
Commit d23b464c authored by chenjiahao's avatar chenjiahao
Browse files
Options

修改图片路径&图片导入方式; 

将进入后台的入口移动至底部
parent d6c8a56f
Hide whitespace changes
Inline Side-by-side
Showing with 852 additions and 826 deletions
src/main.ts
View file @ d23b464c
...@@ -18,7 +18,7 @@ import { setupStore } from '@/store'; ...@@ -18,7 +18,7 @@ import { setupStore } from '@/store';
import App from './App.vue'; import App from './App.vue';
// 默认打包所有静态资源 // 默认打包所有静态资源
import.meta.glob('@/assets/*/*.{png,jpg,gif,svg}', { eager: true }); import.meta.glob('@/assets/**/*.{png,jpg,gif,svg}', { eager: true });
async function bootstrap() { async function bootstrap() {
const app = createApp(App); const app = createApp(App);
......
src/views/AAAFont/Login/LoginForm.vue
View file @ d23b464c
<template> <template>
<!-- <LoginFormTitle v-show="getShow" class="enter-x" />--> <!-- <LoginFormTitle v-show="getShow" class="enter-x" />-->
<Form <Form
class="p-4 enter-x" class="p-4 enter-x"
:model="formData" :model="formData"
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
class="fix-auto-fill" class="fix-auto-fill"
> >
<template #prefix> <template #prefix>
<img src="@/assets/svg/mallHome/login_yonghu.svg"> <img src="@/assets/svg/mallHome/login_yonghu.svg" />
</template> </template>
</Input> </Input>
</FormItem> </FormItem>
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
:placeholder="t('sys.login.password')" :placeholder="t('sys.login.password')"
> >
<template #prefix> <template #prefix>
<img src="@/assets/svg/mallHome/login_mima.svg"> <img src="@/assets/svg/mallHome/login_mima.svg" />
</template> </template>
</InputPassword> </InputPassword>
</FormItem> </FormItem>
...@@ -44,14 +44,14 @@ ...@@ -44,14 +44,14 @@
</Checkbox> </Checkbox>
</FormItem> </FormItem>
</ACol> </ACol>
<!-- <ACol :span="12">--> <!-- <ACol :span="12">-->
<!-- <FormItem :style="{ 'text-align': 'right' }">--> <!-- <FormItem :style="{ 'text-align': 'right' }">-->
<!-- &lt;!&ndash; No logic, you need to deal with it yourself &ndash;&gt;--> <!-- &lt;!&ndash; No logic, you need to deal with it yourself &ndash;&gt;-->
<!-- <Button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">--> <!-- <Button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">-->
<!-- {{ t('sys.login.forgetPassword') }}--> <!-- {{ t('sys.login.forgetPassword') }}-->
<!-- </Button>--> <!-- </Button>-->
<!-- </FormItem>--> <!-- </FormItem>-->
<!-- </ACol>--> <!-- </ACol>-->
</ARow> </ARow>
<FormItem class="enter-x"> <FormItem class="enter-x">
...@@ -64,12 +64,12 @@ ...@@ -64,12 +64,12 @@
</FormItem> </FormItem>
<ARow class="enter-x"> <ARow class="enter-x">
<ACol :span="12"> <ACol :span="12">
<!-- <FormItem :style="{ 'text-align': 'left' }">--> <!-- <FormItem :style="{ 'text-align': 'left' }">-->
<!-- &lt;!&ndash; No logic, you need to deal with it yourself &ndash;&gt;--> <!-- &lt;!&ndash; No logic, you need to deal with it yourself &ndash;&gt;-->
<!-- <Button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">--> <!-- <Button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">-->
<!-- {{ t('sys.login.forgetPassword') }}--> <!-- {{ t('sys.login.forgetPassword') }}-->
<!-- </Button>--> <!-- </Button>-->
<!-- </FormItem>--> <!-- </FormItem>-->
<slot name="forgetmm"></slot> <slot name="forgetmm"></slot>
</ACol> </ACol>
<!-- <ACol :span="12">--> <!-- <ACol :span="12">-->
...@@ -82,33 +82,33 @@ ...@@ -82,33 +82,33 @@
<!-- </ACol>--> <!-- </ACol>-->
</ARow> </ARow>
<!-- <ARow class="enter-x" :gutter="[16, 16]">--> <!-- <ARow class="enter-x" :gutter="[16, 16]">-->
<!-- <ACol :md="8" :xs="24">--> <!-- <ACol :md="8" :xs="24">-->
<!-- <Button block @click="setLoginState(LoginStateEnum.MOBILE)">--> <!-- <Button block @click="setLoginState(LoginStateEnum.MOBILE)">-->
<!-- {{ t('sys.login.mobileSignInFormTitle') }}--> <!-- {{ t('sys.login.mobileSignInFormTitle') }}-->
<!-- </Button>--> <!-- </Button>-->
<!-- </ACol>--> <!-- </ACol>-->
<!-- <ACol :md="8" :xs="24">--> <!-- <ACol :md="8" :xs="24">-->
<!-- <Button block @click="setLoginState(LoginStateEnum.QR_CODE)">--> <!-- <Button block @click="setLoginState(LoginStateEnum.QR_CODE)">-->
<!-- {{ t('sys.login.qrSignInFormTitle') }}--> <!-- {{ t('sys.login.qrSignInFormTitle') }}-->
<!-- </Button>--> <!-- </Button>-->
<!-- </ACol>--> <!-- </ACol>-->
<!-- <ACol :md="8" :xs="24">--> <!-- <ACol :md="8" :xs="24">-->
<!-- <Button block @click="setLoginState(LoginStateEnum.REGISTER)">--> <!-- <Button block @click="setLoginState(LoginStateEnum.REGISTER)">-->
<!-- {{ t('sys.login.registerButton') }}--> <!-- {{ t('sys.login.registerButton') }}-->
<!-- </Button>--> <!-- </Button>-->
<!-- </ACol>--> <!-- </ACol>-->
<!-- </ARow>--> <!-- </ARow>-->
<!-- <Divider class="enter-x">{{ t('sys.login.otherSignIn') }}</Divider>--> <!-- <Divider class="enter-x">{{ t('sys.login.otherSignIn') }}</Divider>-->
<!-- <div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`">--> <!-- <div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`">-->
<!-- <GithubFilled />--> <!-- <GithubFilled />-->
<!-- <WechatFilled />--> <!-- <WechatFilled />-->
<!-- <AlipayCircleFilled />--> <!-- <AlipayCircleFilled />-->
<!-- <GoogleCircleFilled />--> <!-- <GoogleCircleFilled />-->
<!-- <TwitterCircleFilled />--> <!-- <TwitterCircleFilled />-->
<!-- </div>--> <!-- </div>-->
</Form> </Form>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
...@@ -130,7 +130,7 @@ ...@@ -130,7 +130,7 @@
import { useUserStore } from '@/store/modules/user'; import { useUserStore } from '@/store/modules/user';
import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin'; import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
import { useDesign } from '@/hooks/web/useDesign'; import { useDesign } from '@/hooks/web/useDesign';
import Icon from "@/components/Icon/Icon.vue"; import Icon from '@/components/Icon/Icon.vue';
//import { onKeyStroke } from '@vueuse/core'; //import { onKeyStroke } from '@vueuse/core';
const ACol = Col; const ACol = Col;
...@@ -170,7 +170,7 @@ ...@@ -170,7 +170,7 @@
username: data.account, username: data.account,
mode: 'none', //不要默认的错误提示 mode: 'none', //不要默认的错误提示
}); });
console.log('userInfo',userInfo) console.log('userInfo', userInfo);
if (userInfo) { if (userInfo) {
notification.success({ notification.success({
message: t('sys.login.loginSuccessTitle'), message: t('sys.login.loginSuccessTitle'),
...@@ -179,7 +179,7 @@ ...@@ -179,7 +179,7 @@
}); });
} }
} catch (error) { } catch (error) {
console.log('error',error) console.log('error', error);
createErrorModal({ createErrorModal({
title: t('sys.api.errorTip'), title: t('sys.api.errorTip'),
content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'), content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'),
......
src/views/AAAFont/Login/index.vue
View file @ d23b464c
...@@ -12,9 +12,9 @@ ...@@ -12,9 +12,9 @@
<span class="login-title-text">用户登录</span> <span class="login-title-text">用户登录</span>
</div> </div>
<LoginForm /> <LoginForm />
<div style="display: flex;justify-content: space-between"> <div style="display: flex; justify-content: space-between">
<a-button type="link">忘记密码</a-button> <a-button type="link">忘记密码</a-button>
<a-button type="link" @click="handleRegister">没有账号, 立即注册</a-button> <a-button type="link" @click="handleRegister">没有账号, 立即注册</a-button>
</div> </div>
</div> </div>
</div> </div>
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
body { body {
margin: 0; margin: 0;
} }
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
.login-box { .login-box {
width: 100%; width: 100%;
aspect-ratio: 1920 / 863; /* 或者其他的宽高比 */ aspect-ratio: 1920 / 863; /* 或者其他的宽高比 */
background-image: url('src/assets/images/mallHome/login_bg.png'); background-image: url('@/assets/images/mallHome/login_bg.png');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -121,8 +121,7 @@ ...@@ -121,8 +121,7 @@
.login-title { .login-title {
margin: 50px 0 30px 16px; margin: 50px 0 30px 16px;
.login-title-text {
.login-title-text{
width: 128px; width: 128px;
height: 48px; height: 48px;
color: #3f3f3f; color: #3f3f3f;
......
src/views/AAAFont/demandHall/index.vue
View file @ d23b464c
...@@ -34,9 +34,9 @@ ...@@ -34,9 +34,9 @@
<span class="table-span">{{ scope.row.address }}</span> <span class="table-span">{{ scope.row.address }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" width="350" label="申请人"> </el-table-column> <el-table-column prop="name" width="350" label="申请人" />
<el-table-column prop="applicationDate" label="申请日期"> </el-table-column> <el-table-column prop="applicationDate" label="申请日期" />
<el-table-column prop="upDate" label="更新日期"> </el-table-column> <el-table-column prop="upDate" label="更新日期" />
</el-table> </el-table>
</el-tab-pane> </el-tab-pane>
<el-tab-pane name="second"> <el-tab-pane name="second">
...@@ -59,9 +59,9 @@ ...@@ -59,9 +59,9 @@
<span class="table-span">{{ scope.row.address }}</span> <span class="table-span">{{ scope.row.address }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" width="350" label="申请人"> </el-table-column> <el-table-column prop="name" width="350" label="申请人" />
<el-table-column prop="applicationDate" label="申请日期"> </el-table-column> <el-table-column prop="applicationDate" label="申请日期" />
<el-table-column prop="upDate" label="更新日期"> </el-table-column> <el-table-column prop="upDate" label="更新日期" />
</el-table> </el-table>
</el-tab-pane> </el-tab-pane>
<el-tab-pane name="third"> <el-tab-pane name="third">
...@@ -84,9 +84,9 @@ ...@@ -84,9 +84,9 @@
<span class="table-span">{{ scope.row.address }}</span> <span class="table-span">{{ scope.row.address }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" width="350" label="申请人"> </el-table-column> <el-table-column prop="name" width="350" label="申请人" />
<el-table-column prop="applicationDate" label="申请日期"> </el-table-column> <el-table-column prop="applicationDate" label="申请日期" />
<el-table-column prop="upDate" label="更新日期"> </el-table-column> <el-table-column prop="upDate" label="更新日期" />
</el-table> </el-table>
</el-tab-pane> </el-tab-pane>
<el-tab-pane name="fourth"> <el-tab-pane name="fourth">
...@@ -109,16 +109,16 @@ ...@@ -109,16 +109,16 @@
<span class="table-span">{{ scope.row.address }}</span> <span class="table-span">{{ scope.row.address }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" width="350" label="申请人"> </el-table-column> <el-table-column prop="name" width="350" label="申请人" />
<el-table-column prop="applicationDate" label="申请日期"> </el-table-column> <el-table-column prop="applicationDate" label="申请日期" />
<el-table-column prop="upDate" label="更新日期"> </el-table-column> <el-table-column prop="upDate" label="更新日期" />
</el-table> </el-table>
</el-tab-pane> </el-tab-pane>
</div> </div>
</el-tabs> </el-tabs>
<el-button-group> <el-button-group>
<el-button plain class="back-button" type="text"> <el-button plain class="back-button" type="text">
查看更多&nbsp;<Icon :size="24" icon="icon-park-solid:right-c"></Icon> 查看更多&nbsp;<Icon :size="24" icon="icon-park-solid:right-c" />
</el-button> </el-button>
</el-button-group> </el-button-group>
</div> </div>
...@@ -129,272 +129,273 @@ ...@@ -129,272 +129,273 @@
</template> </template>
<script> <script>
import Icon from '@/components/Icon/Icon.vue';
import Icon from '@/components/Icon/Icon.vue'; import { getToken } from '@/utils/auth';
import { getToken } from '@/utils/auth'; import cardLogo from '@/assets/images/mallHome/biaoqian.png';
import industryImg from '@/assets/images/mallHome/行业动态.png';
export default { import dynamicImg from '@/assets/images/mallHome/hangyedongtai.png';
name: 'demandHall',
components: { Icon }, const items = [
data() { {
return { id: '1',
activeName: 'first', url: new URL('@/assets/images/mallHome/banner1.png', import.meta.url).href,
activeName1: 'first',
activeName2: 'first',
cardLogo: 'src/assets/images/mallHome/biaoqian.png',
industryImg: 'src/assets/images/mallHome/行业动态.png',
dynamicImg: 'src/assets/images/mallHome/hangyedongtai.png',
items: [
{
id: '1',
url: 'src/assets/images/mallHome/banner1.png',
},
{
id: '2',
url: 'src/assets/images/mallHome/banner.png',
},
],
tableData: [
{
applicationDate: '2016-05-02',
upDate: '2016-05-02',
name: '**先导精密机械有限公司',
address: '关系型与非关系型数据库分析数据',
},
{
applicationDate: '2016-05-04',
upDate: '2016-05-04',
name: '天津市融创软通科技股份有限公司',
address: '图形学算法与应用分析数据',
},
{
applicationDate: '2016-05-01',
upDate: '2016-05-01',
name: '天津市融创软通科技股份有限公司',
address: '编程思想与设计模式分析数据',
},
{
applicationDate: '2016-05-03',
upDate: '2016-05-03',
name: '天津市融创软通科技股份有限公司',
address: '46-55岁人群对净水机满意度分析数据',
},
],
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}, },
{
// 进入后台方法 id: '2',
toBackstage() { url: new URL('@/assets/images/mallHome/banner.png', import.meta.url).href,
console.log('activeIndex', this.activeIndex); },
if (getToken()) { ];
this.$router.push({ path: '/homePage/index' }); export default {
} else { name: 'DemandHall',
this.$router.push({ path: '/login' }); components: { Icon },
} data() {
// if (getToken()){ return {
// this.$router.push({path: "/admin"}); activeName: 'first',
// }else { activeName1: 'first',
// this.$router.push({path: "/login"}); activeName2: 'first',
// } cardLogo,
industryImg,
dynamicImg,
items,
tableData: [
{
applicationDate: '2016-05-02',
upDate: '2016-05-02',
name: '**先导精密机械有限公司',
address: '关系型与非关系型数据库分析数据',
},
{
applicationDate: '2016-05-04',
upDate: '2016-05-04',
name: '天津市融创软通科技股份有限公司',
address: '图形学算法与应用分析数据',
},
{
applicationDate: '2016-05-01',
upDate: '2016-05-01',
name: '天津市融创软通科技股份有限公司',
address: '编程思想与设计模式分析数据',
},
{
applicationDate: '2016-05-03',
upDate: '2016-05-03',
name: '天津市融创软通科技股份有限公司',
address: '46-55岁人群对净水机满意度分析数据',
},
],
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
// 进入后台方法
toBackstage() {
console.log('activeIndex', this.activeIndex);
if (getToken()) {
this.$router.push({ path: '/homePage/index' });
} else {
this.$router.push({ path: '/login' });
}
// if (getToken()){
// this.$router.push({path: "/admin"});
// }else {
// this.$router.push({path: "/login"});
// }
},
}, },
}, };
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
/*公共容器 所有子页面共享的css样式*/ /*公共容器 所有子页面共享的css样式*/
.commonContainer { .commonContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/*justify-content: center; !* 垂直居中 *!*/ /*justify-content: center; !* 垂直居中 *!*/
align-items: center; /* 水平居中 */ align-items: center; /* 水平居中 */
text-align: center; text-align: center;
position: relative; position: relative;
} }
/*子页面中文标题样式*/
.content-item-h3 {
height: 43px;
font-size: 36px;
font-weight: 580;
z-index: 3;
color: #383737ff;
line-height: 43px;
letter-spacing: 10px;
margin: 60px 0 0 0;
}
.title_bottom {
margin-top: 40px;
font-size: 24px;
font-weight: 500;
color: #a3a3a3;
letter-spacing: 4px;
}
.item-content-box {
display: flex;
flex-direction: column;
align-items: center;
}
.carouselImg {
width: 100%;
height: 100%;
}
.tab-pane { /*子页面中文标题样式*/
position: relative; .content-item-h3 {
margin-top: 80px; height: 43px;
width: 1440px; font-size: 36px;
display: flex; font-weight: 580;
} z-index: 3;
color: #383737ff;
line-height: 43px;
letter-spacing: 10px;
margin: 60px 0 0 0;
}
//tabs 按钮 .title_bottom {
.back-button { margin-top: 40px;
position: absolute; font-size: 24px;
top: 0; font-weight: 500;
right: 0; color: #a3a3a3;
font-size: 18px; letter-spacing: 4px;
margin-top: 3px; }
color: #3a5cde;
}
.card-row { .item-content-box {
display: flex; display: flex;
justify-content: space-around; flex-direction: column;
margin-top: 20px; align-items: center;
font-size: 18px; }
text-align: left;
p { .carouselImg {
margin-top: 18px; width: 100%;
height: 24px; height: 100%;
} }
.card-left { .tab-pane {
width: 28%; position: relative;
color: #707070; margin-top: 80px;
width: 1440px;
display: flex;
} }
.card-right { //tabs 按钮
width: 68%; .back-button {
color: #3f3f3f; position: absolute;
top: 0;
right: 0;
font-size: 18px;
margin-top: 3px;
color: #3a5cde;
} }
}
.tab-label { .card-row {
font-size: 24px; display: flex;
font-weight: 700; justify-content: space-around;
} margin-top: 20px;
font-size: 18px;
text-align: left;
.card_bottom { p {
display: flex; margin-top: 18px;
justify-content: space-between; height: 24px;
align-items: center; }
font-weight: 500;
.button { .card-left {
color: #1962e2; width: 28%;
border: #1962e2 2px solid; color: #707070;
}
.card-right {
width: 68%;
color: #3f3f3f;
}
} }
}
.industry { .tab-label {
width: 100%; font-size: 24px;
margin-top: 100px; font-weight: 700;
background-color: #eff3fa; }
display: flex;
flex-direction: column;
align-items: center;
.industry-row { .card_bottom {
width: 1440px;
margin-top: 72px;
margin-bottom: 72px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
font-weight: 500;
.row-left { .button {
width: 464px; color: #1962e2;
height: 400px; border: #1962e2 2px solid;
border-radius: 8px;
background-color: #ffffff;
padding: 37px 24px 24px 24px;
.big-event {
display: flex;
align-items: center;
}
} }
}
.row-right { .industry {
border-radius: 8px; width: 100%;
background-color: #ffffff; margin-top: 100px;
width: 952px; background-color: #eff3fa;
height: 400px; display: flex;
padding: 33px 24px 24px 24px; flex-direction: column;
align-items: center;
.right-li {
display: flex; .industry-row {
justify-content: space-between; width: 1440px;
font-size: 18px; margin-top: 72px;
margin: 30px 20px 20px 0; margin-bottom: 72px;
display: flex;
.li-left { justify-content: space-between;
}
.row-left {
.li-middle { width: 464px;
width: 76%; height: 400px;
color: #3f3f3f; border-radius: 8px;
background-color: #ffffff;
padding: 37px 24px 24px 24px;
.big-event {
display: flex;
align-items: center;
} }
}
.li-right { .row-right {
color: #9c9c9c; border-radius: 8px;
background-color: #ffffff;
width: 952px;
height: 400px;
padding: 33px 24px 24px 24px;
.right-li {
display: flex;
justify-content: space-between;
font-size: 18px;
margin: 30px 20px 20px 0;
.li-left {
}
.li-middle {
width: 76%;
color: #3f3f3f;
}
.li-right {
color: #9c9c9c;
}
} }
} }
} }
} }
}
.custom-table {
margin-bottom: 72px;
}
.table-span {
color: #1962e2;
margin-left: 80px;
}
.table-span-label {
margin-left: 80px;
}
.row-footer{ .custom-table {
height: 242px; margin-bottom: 72px;
opacity: 0.8;
background-color: #1962E2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
.footer-title{
height: 48px;
color: #ffffff;
font-size: 32px;
font-weight: 500;
} }
.table-span {
.footer-button{ color: #1962e2;
width: 160px; margin-left: 80px;
height: 51px; }
font-size: 18px; .table-span-label {
background-color: #FFFFFF; margin-left: 80px;
color: #1962E2;
} }
}
.row-footer {
height: 242px;
opacity: 0.8;
background-color: #1962e2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
.footer-title {
height: 48px;
color: #ffffff;
font-size: 32px;
font-weight: 500;
}
.footer-button {
width: 160px;
height: 51px;
font-size: 18px;
background-color: #ffffff;
color: #1962e2;
}
}
</style> </style>
src/views/AAAFont/front/index.vue
View file @ d23b464c
...@@ -154,7 +154,8 @@ ...@@ -154,7 +154,8 @@
margin-top: 24px; margin-top: 24px;
background-color: #754e9e; background-color: #754e9e;
" "
><img :src="dynamicImg" /></div> ><img :src="dynamicImg"
/></div>
<div class="mt-5 big-event"> <div class="mt-5 big-event">
<el-tag style="font-size: 14px">大事件</el-tag> <el-tag style="font-size: 14px">大事件</el-tag>
<span class="ml-2" style="font-size: 18px">大数据平台上线</span> <span class="ml-2" style="font-size: 18px">大数据平台上线</span>
...@@ -378,14 +379,6 @@ ...@@ -378,14 +379,6 @@
</el-button-group> </el-button-group>
</div> </div>
</div> </div>
<div class="row-footer">
<div class="footer-title">
<span>大数据服务平台上线啦~</span>
</div>
<el-button plain class="footer-button" type="text" @click="toBackstage()">
立即前往<Icon class="ml-3" :size="20" icon="icon-park-solid:right-c" />
</el-button>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -394,6 +387,21 @@ ...@@ -394,6 +387,21 @@
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
import { getToken } from '@/utils/auth'; import { getToken } from '@/utils/auth';
import cardLogo from '@/assets/images/mallHome/biaoqian.png';
import industryImg from '@/assets/images/mallHome/行业动态.png';
import dynamicImg from '@/assets/images/mallHome/hangyedongtai.png';
const items = [
{
id: '1',
url: new URL('@/assets/images/mallHome/banner1.png', import.meta.url).href,
},
{
id: '2',
url: new URL('@/assets/images/mallHome/banner.png', import.meta.url).href,
},
];
export default { export default {
name: 'Front', name: 'Front',
components: { Icon }, components: { Icon },
...@@ -402,19 +410,10 @@ ...@@ -402,19 +410,10 @@
activeName: 'first', activeName: 'first',
activeName1: 'first', activeName1: 'first',
activeName2: 'first', activeName2: 'first',
cardLogo: 'src/assets/images/mallHome/biaoqian.png', cardLogo,
industryImg: 'src/assets/images/mallHome/行业动态.png', industryImg,
dynamicImg: 'src/assets/images/mallHome/hangyedongtai.png', dynamicImg,
items: [ items,
{
id: '1',
url: 'src/assets/images/mallHome/banner1.png',
},
{
id: '2',
url: 'src/assets/images/mallHome/banner.png',
},
],
tableData: [ tableData: [
{ {
applicationDate: '2016-05-02', applicationDate: '2016-05-02',
......
src/views/AAAFont/index.vue
View file @ d23b464c
...@@ -53,6 +53,15 @@ ...@@ -53,6 +53,15 @@
<router-view /> <router-view />
</div> </div>
<div class="row-footer">
<div class="footer-title">
<span>大数据服务平台上线啦~</span>
</div>
<el-button plain class="footer-button" type="text" @click="toBackstage()">
立即前往<Icon class="ml-3" :size="20" icon="icon-park-solid:right-c" />
</el-button>
</div>
<div class="footer-item-por"> <div class="footer-item-por">
<div>版权所有:<span>天津市融创软通科技股份有限公司</span></div> <div>版权所有:<span>天津市融创软通科技股份有限公司</span></div>
<div class="right-div"> <div class="right-div">
...@@ -82,8 +91,8 @@ ...@@ -82,8 +91,8 @@
{ path: '/aaaFont/font', text: '首页' }, { path: '/aaaFont/font', text: '首页' },
{ path: '/aaaFont/tradingMarket', text: '交易市场' }, { path: '/aaaFont/tradingMarket', text: '交易市场' },
{ path: '/aaaFont/demandHall', text: '需求大厅' }, { path: '/aaaFont/demandHall', text: '需求大厅' },
{ path: '/aaaFont/nationalPolicy', text: '国家政策' },
{ path: '/aaaFont/dataRegistration', text: '数据登记' }, { path: '/aaaFont/dataRegistration', text: '数据登记' },
{ path: '/aaaFont/nationalPolicy', text: '国家政策' },
], ],
// titleNameImage: require('@/assets/tiankai_cup/home/biaoti2.png'), // titleNameImage: require('@/assets/tiankai_cup/home/biaoti2.png'),
// titleNameImage1: require('@/assets/tiankai_cup/home/logo.png'), // titleNameImage1: require('@/assets/tiankai_cup/home/logo.png'),
...@@ -95,7 +104,6 @@ ...@@ -95,7 +104,6 @@
get() { get() {
let currentPath = this.$route.path; //获取当前的路由路径 let currentPath = this.$route.path; //获取当前的路由路径
let activeIndex = undefined; //用于返回期望激活的导航项的index值 let activeIndex = undefined; //用于返回期望激活的导航项的index值
// 判断是否是走进天开园页面
this.showFixed = !(currentPath === '/introduce' || currentPath.startsWith('/introduce/')); this.showFixed = !(currentPath === '/introduce' || currentPath.startsWith('/introduce/'));
for (let nav of this.navs) { for (let nav of this.navs) {
...@@ -437,8 +445,30 @@ ...@@ -437,8 +445,30 @@
font-weight: 500; font-weight: 500;
} }
.row-footer {
height: 242px;
opacity: 0.8;
background-color: #1962e2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
.footer-title {
height: 48px;
color: #ffffff;
font-size: 32px;
font-weight: 500;
}
.footer-button {
width: 160px;
height: 51px;
font-size: 18px;
background-color: #ffffff;
color: #1962e2;
}
}
/*底部版权所有样式*/ /*底部版权所有样式*/
.footer-item-por { .footer-item-por {
......
src/views/AAAFont/register/RegisterForm.vue
View file @ d23b464c
<template> <template>
<!-- <div v-if="getShow">--> <!-- <div v-if="getShow">-->
<Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef"> <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
<FormItem name="account" class="enter-x"> <FormItem name="account" class="enter-x">
<Input <Input
class="fix-auto-fill" class="fix-auto-fill"
size="large" size="large"
v-model:value="formData.account" v-model:value="formData.account"
placeholder="请输入用户名" placeholder="请输入用户名"
:placeholder="t('sys.login.userName')" :placeholder="t('sys.login.userName')"
/> />
</FormItem> </FormItem>
<FormItem name="mobile" class="enter-x"> <FormItem name="mobile" class="enter-x">
<Input <Input
size="large" size="large"
v-model:value="formData.mobile" v-model:value="formData.mobile"
:placeholder="t('sys.login.mobile')" :placeholder="t('sys.login.mobile')"
class="fix-auto-fill" class="fix-auto-fill"
/> />
</FormItem> </FormItem>
<FormItem name="sms" class="enter-x"> <FormItem name="sms" class="enter-x">
<CountdownInput <CountdownInput
size="large" size="large"
class="fix-auto-fill" class="fix-auto-fill"
v-model:value="formData.sms" v-model:value="formData.sms"
:placeholder="t('sys.login.smsCode')" :placeholder="t('sys.login.smsCode')"
/> />
</FormItem> </FormItem>
<FormItem name="password" class="enter-x"> <FormItem name="password" class="enter-x">
<InputPassword <InputPassword
size="large" size="large"
v-model:value="formData.password" v-model:value="formData.password"
placeholder="请输入密码" placeholder="请输入密码"
:placeholder="t('sys.login.password')" :placeholder="t('sys.login.password')"
/> />
</FormItem> </FormItem>
<FormItem name="confirmPassword" class="enter-x"> <FormItem name="confirmPassword" class="enter-x">
<InputPassword <InputPassword
size="large" size="large"
visibilityToggle visibilityToggle
v-model:value="formData.confirmPassword" v-model:value="formData.confirmPassword"
placeholder="请输入重复密码" placeholder="请输入重复密码"
:placeholder="t('sys.login.confirmPassword')" :placeholder="t('sys.login.confirmPassword')"
/> />
</FormItem> </FormItem>
<FormItem class="enter-x" name="policy"> <FormItem class="enter-x" name="policy">
<!-- No logic, you need to deal with it yourself --> <!-- No logic, you need to deal with it yourself -->
<Checkbox v-model:checked="formData.policy" size="small"> <Checkbox v-model:checked="formData.policy" size="small">
{{ t('sys.login.policy') }} {{ t('sys.login.policy') }}
</Checkbox> </Checkbox>
</FormItem> </FormItem>
<Button <Button
type="primary" type="primary"
class="enter-x" class="enter-x"
size="large" size="large"
block block
@click="handleRegister" @click="handleRegister"
:loading="loading" :loading="loading"
> >
{{ t('sys.login.registerButton') }} {{ t('sys.login.registerButton') }}
</Button> </Button>
<!-- <Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">--> <!-- <Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">-->
<!-- {{ t('sys.login.backSignIn') }}--> <!-- {{ t('sys.login.backSignIn') }}-->
<!-- </Button>--> <!-- </Button>-->
</Form> </Form>
<!-- </div>--> <!-- </div>-->
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { reactive, ref, unref, computed } from 'vue'; import { reactive, ref, unref, computed } from 'vue';
......
src/views/AAAFont/register/index.vue
View file @ d23b464c
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<div class="register-title"> <div class="register-title">
<span class="register-title-text">欢迎注册</span> <span class="register-title-text">欢迎注册</span>
</div> </div>
<RegisterForm/> <RegisterForm />
</div> </div>
</div> </div>
</div> </div>
...@@ -21,113 +21,108 @@ ...@@ -21,113 +21,108 @@
</template> </template>
<script> <script>
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
import RegisterForm from "./RegisterForm.vue"; import RegisterForm from './RegisterForm.vue';
export default { export default {
name: 'register', name: 'Register',
components: {RegisterForm, Icon }, components: { RegisterForm, Icon },
data() { data() {
return {}; return {};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}, },
handleTitle() { methods: {
this.$router.replace('/aaaFont/font'); handleClick(tab, event) {
console.log(tab, event);
},
handleTitle() {
this.$router.replace('/aaaFont/font');
},
}, },
}, };
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
body { body {
margin: 0; margin: 0;
}
#register {
min-width: 1366px;
width: auto;
position: relative;
/*transform: translate(0, 0);*/
background-color: #EFF3FA;
}
.header {
/*position: fixed;*/
z-index: 999;
width: 100%;
margin: auto;
height: 90px;
display: flex;
align-items: center;
top: 0;
background-color: #ffffff;
.title-right {
width: 36px;
height: 27px;
line-height: 27px;
color: #707070;
font-size: 18px;
margin-left: 40px;
} }
} #register {
min-width: 1366px;
/*标题样式*/ width: auto;
.official-title { position: relative;
font-size: 24px; /*transform: translate(0, 0);*/
font-weight: 600; background-color: #eff3fa;
line-height: 28px; }
padding: 0 40px; .header {
margin-left: 22px; /*position: fixed;*/
/*display: flex;*/ z-index: 999;
/*justify-content: center;*/ width: 100%;
position: relative; margin: auto;
} height: 90px;
.official-title::before { display: flex;
content: ''; align-items: center;
position: absolute; top: 0;
right: 0; background-color: #ffffff;
top: 0;
bottom: 0;
width: 1px;
background-color: #dce7fb;
}
.register-box { .title-right {
width: 100%; width: 36px;
aspect-ratio: 1920 / 863; /* 或者其他的宽高比 */ height: 27px;
position: relative; line-height: 27px;
color: #707070;
font-size: 18px;
margin-left: 40px;
}
}
.register-win { /*标题样式*/
width: 75%; .official-title {
height: 75%; font-size: 24px;
background: #fdfdfd; font-weight: 600;
border-radius: 8px; line-height: 28px;
padding: 0 40px;
margin-left: 22px;
/*display: flex;*/
/*justify-content: center;*/
position: relative;
}
.official-title::before {
content: '';
position: absolute; position: absolute;
left: 50%; right: 0;
top: 50%; top: 0;
transform: translate(-50%, -50%); bottom: 0;
width: 1px;
background-color: #dce7fb;
}
.register-box {
width: 100%;
aspect-ratio: 1920 / 863; /* 或者其他的宽高比 */
position: relative;
.win-box{ .register-win {
width: 30%; width: 75%;
margin: 0 auto; background: #fdfdfd;
border-radius: 8px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.register-title { .win-box {
margin: 50px 0 30px 16px; width: 30%;
margin: 0 auto;
.register-title {
margin: 50px 0 30px 16px;
.register-title-text{ .register-title-text {
width: 128px; width: 128px;
height: 48px; height: 48px;
color: #3f3f3f; color: #3f3f3f;
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
}
} }
} }
} }
} }
}
</style> </style>
src/views/AAAFont/tradingMarket/index.vue
View file @ d23b464c
...@@ -11,390 +11,392 @@ ...@@ -11,390 +11,392 @@
</el-carousel> </el-carousel>
</div> </div>
<div class="tab-pane"> <div class="tab-pane">
<el-tabs v-model="activeName2" @tab-click="handleClick"> <el-tabs v-model="activeName2" @tab-click="handleClick">
<div class="custom-table"> <div class="custom-table">
<el-tab-pane name="first"> <el-tab-pane name="first">
<template #label> <template #label>
<span class="mb-4 tab-label">数据集</span> <span class="mb-4 tab-label">数据集</span>
</template> </template>
<el-table <el-table
class="mt-5" class="mt-5"
:fits="true" :fits="true"
:row-style="{ height: '60px' }" :row-style="{ height: '60px' }"
:header-cell-style="{ background: '#E4ECFA', color: '#3F3F3F', height: '60px' }" :header-cell-style="{ background: '#E4ECFA', color: '#3F3F3F', height: '60px' }"
:data="tableData" :data="tableData"
style="width: 1440px; font-size: 18px" style="width: 1440px; font-size: 18px"
> >
<el-table-column prop="address" width="500" label="数据集产权名称"> <el-table-column prop="address" width="500" label="数据集产权名称">
<template #header="scope"> <template #header="scope">
<span class="table-span-label">{{ scope.column.label }}</span> <span class="table-span-label">{{ scope.column.label }}</span>
</template> </template>
<template #default="scope"> <template #default="scope">
<span class="table-span">{{ scope.row.address }}</span> <span class="table-span">{{ scope.row.address }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" width="350" label="申请人"> </el-table-column> <el-table-column prop="name" width="350" label="申请人" />
<el-table-column prop="applicationDate" label="申请日期"> </el-table-column> <el-table-column prop="applicationDate" label="申请日期" />
<el-table-column prop="upDate" label="更新日期"> </el-table-column> <el-table-column prop="upDate" label="更新日期" />
</el-table> </el-table>
</el-tab-pane> </el-tab-pane>
<el-tab-pane name="second"> <el-tab-pane name="second">
<template #label> <template #label>
<span class="mb-4 tab-label">文件</span> <span class="mb-4 tab-label">文件</span>
</template> </template>
<el-table <el-table
class="mt-5" class="mt-5"
:fits="true" :fits="true"
:row-style="{ height: '60px' }" :row-style="{ height: '60px' }"
:header-cell-style="{ background: '#E4ECFA', color: '#3F3F3F', height: '60px' }" :header-cell-style="{ background: '#E4ECFA', color: '#3F3F3F', height: '60px' }"
:data="tableData" :data="tableData"
style="width: 1440px; font-size: 18px" style="width: 1440px; font-size: 18px"
> >
<el-table-column prop="address" width="500" label="文件产权名称"> <el-table-column prop="address" width="500" label="文件产权名称">
<template #header="scope"> <template #header="scope">
<span class="table-span-label">{{ scope.column.label }}</span> <span class="table-span-label">{{ scope.column.label }}</span>
</template> </template>
<template #default="scope"> <template #default="scope">
<span class="table-span">{{ scope.row.address }}</span> <span class="table-span">{{ scope.row.address }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" width="350" label="申请人"> </el-table-column> <el-table-column prop="name" width="350" label="申请人" />
<el-table-column prop="applicationDate" label="申请日期"> </el-table-column> <el-table-column prop="applicationDate" label="申请日期" />
<el-table-column prop="upDate" label="更新日期"> </el-table-column> <el-table-column prop="upDate" label="更新日期" />
</el-table> </el-table>
</el-tab-pane> </el-tab-pane>
<el-tab-pane name="third"> <el-tab-pane name="third">
<template #label> <template #label>
<span class="mb-4 tab-label">API</span> <span class="mb-4 tab-label">API</span>
</template> </template>
<el-table <el-table
class="mt-5" class="mt-5"
:fits="true" :fits="true"
:row-style="{ height: '60px' }" :row-style="{ height: '60px' }"
:header-cell-style="{ background: '#E4ECFA', color: '#3F3F3F', height: '60px' }" :header-cell-style="{ background: '#E4ECFA', color: '#3F3F3F', height: '60px' }"
:data="tableData" :data="tableData"
style="width: 1440px; font-size: 18px" style="width: 1440px; font-size: 18px"
> >
<el-table-column prop="address" width="500" label="API产权名称"> <el-table-column prop="address" width="500" label="API产权名称">
<template #header="scope"> <template #header="scope">
<span class="table-span-label">{{ scope.column.label }}</span> <span class="table-span-label">{{ scope.column.label }}</span>
</template> </template>
<template #default="scope"> <template #default="scope">
<span class="table-span">{{ scope.row.address }}</span> <span class="table-span">{{ scope.row.address }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" width="350" label="申请人"> </el-table-column> <el-table-column prop="name" width="350" label="申请人" />
<el-table-column prop="applicationDate" label="申请日期"> </el-table-column> <el-table-column prop="applicationDate" label="申请日期" />
<el-table-column prop="upDate" label="更新日期"> </el-table-column> <el-table-column prop="upDate" label="更新日期" />
</el-table> </el-table>
</el-tab-pane> </el-tab-pane>
<el-tab-pane name="fourth"> <el-tab-pane name="fourth">
<template #label> <template #label>
<span class="mb-4 tab-label">登记服务</span> <span class="mb-4 tab-label">登记服务</span>
</template> </template>
<el-table <el-table
class="mt-5" class="mt-5"
:fits="true" :fits="true"
:row-style="{ height: '60px' }" :row-style="{ height: '60px' }"
:header-cell-style="{ background: '#E4ECFA', color: '#3F3F3F', height: '60px' }" :header-cell-style="{ background: '#E4ECFA', color: '#3F3F3F', height: '60px' }"
:data="tableData" :data="tableData"
style="width: 1440px; font-size: 18px" style="width: 1440px; font-size: 18px"
> >
<el-table-column prop="address" width="500" label="登记产品产权名称"> <el-table-column prop="address" width="500" label="登记产品产权名称">
<template #header="scope"> <template #header="scope">
<span class="table-span-label">{{ scope.column.label }}</span> <span class="table-span-label">{{ scope.column.label }}</span>
</template> </template>
<template #default="scope"> <template #default="scope">
<span class="table-span">{{ scope.row.address }}</span> <span class="table-span">{{ scope.row.address }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" width="350" label="申请人"> </el-table-column> <el-table-column prop="name" width="350" label="申请人" />
<el-table-column prop="applicationDate" label="申请日期"> </el-table-column> <el-table-column prop="applicationDate" label="申请日期" />
<el-table-column prop="upDate" label="更新日期"> </el-table-column> <el-table-column prop="upDate" label="更新日期" />
</el-table> </el-table>
</el-tab-pane> </el-tab-pane>
</div> </div>
</el-tabs> </el-tabs>
<el-button-group> <el-button-group>
<el-button plain class="back-button" type="text"> <el-button plain class="back-button" type="text">
查看更多&nbsp;<Icon :size="24" icon="icon-park-solid:right-c"></Icon> 查看更多&nbsp;<Icon :size="24" icon="icon-park-solid:right-c" />
</el-button> </el-button>
</el-button-group> </el-button-group>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</template> </template>
<script> <script>
import Icon from '@/components/Icon/Icon.vue';
import Icon from '@/components/Icon/Icon.vue'; import { getToken } from '@/utils/auth';
import { getToken } from '@/utils/auth'; import cardLogo from '@/assets/images/mallHome/biaoqian.png';
import industryImg from '@/assets/images/mallHome/行业动态.png';
export default { import dynamicImg from '@/assets/images/mallHome/hangyedongtai.png';
name: 'Front',
components: { Icon }, const items = [
data() { {
return { id: '1',
activeName: 'first', url: new URL('@/assets/images/mallHome/banner1.png', import.meta.url).href,
activeName1: 'first',
activeName2: 'first',
cardLogo: 'src/assets/images/mallHome/biaoqian.png',
industryImg: 'src/assets/images/mallHome/行业动态.png',
dynamicImg: 'src/assets/images/mallHome/hangyedongtai.png',
items: [
{
id: '1',
url: 'src/assets/images/mallHome/banner1.png',
},
{
id: '2',
url: 'src/assets/images/mallHome/banner.png',
},
],
tableData: [
{
applicationDate: '2016-05-02',
upDate: '2016-05-02',
name: '**先导精密机械有限公司',
address: '关系型与非关系型数据库分析数据',
},
{
applicationDate: '2016-05-04',
upDate: '2016-05-04',
name: '天津市融创软通科技股份有限公司',
address: '图形学算法与应用分析数据',
},
{
applicationDate: '2016-05-01',
upDate: '2016-05-01',
name: '天津市融创软通科技股份有限公司',
address: '编程思想与设计模式分析数据',
},
{
applicationDate: '2016-05-03',
upDate: '2016-05-03',
name: '天津市融创软通科技股份有限公司',
address: '46-55岁人群对净水机满意度分析数据',
},
],
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}, },
{
// 进入后台方法 id: '2',
toBackstage() { url: new URL('@/assets/images/mallHome/banner.png', import.meta.url).href,
console.log('activeIndex', this.activeIndex);
if (getToken()) {
this.$router.push({ path: '/homePage/index' });
} else {
this.$router.push({ path: '/login' });
}
// if (getToken()){
// this.$router.push({path: "/admin"});
// }else {
// this.$router.push({path: "/login"});
// }
}, },
}, ];
};
export default {
name: 'Front',
components: { Icon },
data() {
return {
activeName: 'first',
activeName1: 'first',
activeName2: 'first',
cardLogo,
industryImg,
dynamicImg,
items,
tableData: [
{
applicationDate: '2016-05-02',
upDate: '2016-05-02',
name: '**先导精密机械有限公司',
address: '关系型与非关系型数据库分析数据',
},
{
applicationDate: '2016-05-04',
upDate: '2016-05-04',
name: '天津市融创软通科技股份有限公司',
address: '图形学算法与应用分析数据',
},
{
applicationDate: '2016-05-01',
upDate: '2016-05-01',
name: '天津市融创软通科技股份有限公司',
address: '编程思想与设计模式分析数据',
},
{
applicationDate: '2016-05-03',
upDate: '2016-05-03',
name: '天津市融创软通科技股份有限公司',
address: '46-55岁人群对净水机满意度分析数据',
},
],
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
// 进入后台方法
toBackstage() {
console.log('activeIndex', this.activeIndex);
if (getToken()) {
this.$router.push({ path: '/homePage/index' });
} else {
this.$router.push({ path: '/login' });
}
// if (getToken()){
// this.$router.push({path: "/admin"});
// }else {
// this.$router.push({path: "/login"});
// }
},
},
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
/*公共容器 所有子页面共享的css样式*/ /*公共容器 所有子页面共享的css样式*/
.commonContainer { .commonContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/*justify-content: center; !* 垂直居中 *!*/ /*justify-content: center; !* 垂直居中 *!*/
align-items: center; /* 水平居中 */ align-items: center; /* 水平居中 */
text-align: center; text-align: center;
position: relative; position: relative;
} }
/*子页面中文标题样式*/
.content-item-h3 {
height: 43px;
font-size: 36px;
font-weight: 580;
z-index: 3;
color: #383737ff;
line-height: 43px;
letter-spacing: 10px;
margin: 60px 0 0 0;
}
.title_bottom {
margin-top: 40px;
font-size: 24px;
font-weight: 500;
color: #a3a3a3;
letter-spacing: 4px;
}
.item-content-box {
display: flex;
flex-direction: column;
align-items: center;
}
.carouselImg {
width: 100%;
height: 100%;
}
.tab-pane { /*子页面中文标题样式*/
position: relative; .content-item-h3 {
margin-top: 80px; height: 43px;
width: 1440px; font-size: 36px;
display: flex; font-weight: 580;
} z-index: 3;
color: #383737ff;
line-height: 43px;
letter-spacing: 10px;
margin: 60px 0 0 0;
}
//tabs 按钮 .title_bottom {
.back-button { margin-top: 40px;
position: absolute; font-size: 24px;
top: 0; font-weight: 500;
right: 0; color: #a3a3a3;
font-size: 18px; letter-spacing: 4px;
margin-top: 3px; }
color: #3a5cde;
}
.card-row { .item-content-box {
display: flex; display: flex;
justify-content: space-around; flex-direction: column;
margin-top: 20px; align-items: center;
font-size: 18px; }
text-align: left;
p { .carouselImg {
margin-top: 18px; width: 100%;
height: 24px; height: 100%;
} }
.card-left { .tab-pane {
width: 28%; position: relative;
color: #707070; margin-top: 80px;
width: 1440px;
display: flex;
} }
.card-right { //tabs 按钮
width: 68%; .back-button {
color: #3f3f3f; position: absolute;
top: 0;
right: 0;
font-size: 18px;
margin-top: 3px;
color: #3a5cde;
} }
}
.tab-label { .card-row {
font-size: 24px; display: flex;
font-weight: 700; justify-content: space-around;
} margin-top: 20px;
font-size: 18px;
text-align: left;
.card_bottom { p {
display: flex; margin-top: 18px;
justify-content: space-between; height: 24px;
align-items: center; }
font-weight: 500;
.button { .card-left {
color: #1962e2; width: 28%;
border: #1962e2 2px solid; color: #707070;
}
.card-right {
width: 68%;
color: #3f3f3f;
}
} }
}
.industry { .tab-label {
width: 100%; font-size: 24px;
margin-top: 100px; font-weight: 700;
background-color: #eff3fa; }
display: flex;
flex-direction: column;
align-items: center;
.industry-row { .card_bottom {
width: 1440px;
margin-top: 72px;
margin-bottom: 72px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
font-weight: 500;
.row-left { .button {
width: 464px; color: #1962e2;
height: 400px; border: #1962e2 2px solid;
border-radius: 8px;
background-color: #ffffff;
padding: 37px 24px 24px 24px;
.big-event {
display: flex;
align-items: center;
}
} }
}
.row-right { .industry {
border-radius: 8px; width: 100%;
background-color: #ffffff; margin-top: 100px;
width: 952px; background-color: #eff3fa;
height: 400px; display: flex;
padding: 33px 24px 24px 24px; flex-direction: column;
align-items: center;
.right-li {
display: flex; .industry-row {
justify-content: space-between; width: 1440px;
font-size: 18px; margin-top: 72px;
margin: 30px 20px 20px 0; margin-bottom: 72px;
display: flex;
.li-left { justify-content: space-between;
}
.row-left {
.li-middle { width: 464px;
width: 76%; height: 400px;
color: #3f3f3f; border-radius: 8px;
background-color: #ffffff;
padding: 37px 24px 24px 24px;
.big-event {
display: flex;
align-items: center;
} }
}
.li-right { .row-right {
color: #9c9c9c; border-radius: 8px;
background-color: #ffffff;
width: 952px;
height: 400px;
padding: 33px 24px 24px 24px;
.right-li {
display: flex;
justify-content: space-between;
font-size: 18px;
margin: 30px 20px 20px 0;
.li-left {
}
.li-middle {
width: 76%;
color: #3f3f3f;
}
.li-right {
color: #9c9c9c;
}
} }
} }
} }
} }
}
.custom-table {
margin-bottom: 72px;
}
.table-span {
color: #1962e2;
margin-left: 80px;
}
.table-span-label {
margin-left: 80px;
}
.row-footer{ .custom-table {
height: 242px; margin-bottom: 72px;
opacity: 0.8;
background-color: #1962E2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
.footer-title{
height: 48px;
color: #ffffff;
font-size: 32px;
font-weight: 500;
} }
.table-span {
.footer-button{ color: #1962e2;
width: 160px; margin-left: 80px;
height: 51px; }
font-size: 18px; .table-span-label {
background-color: #FFFFFF; margin-left: 80px;
color: #1962E2;
} }
}
.row-footer {
height: 242px;
opacity: 0.8;
background-color: #1962e2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
.footer-title {
height: 48px;
color: #ffffff;
font-size: 32px;
font-weight: 500;
}
.footer-button {
width: 160px;
height: 51px;
font-size: 18px;
background-color: #ffffff;
color: #1962e2;
}
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment