Commit d23b464c authored by chenjiahao's avatar chenjiahao

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

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