Commit d23b464c authored by chenjiahao's avatar chenjiahao

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

将进入后台的入口移动至底部
parent d6c8a56f
...@@ -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);
......
<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'),
......
...@@ -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;
......
This diff is collapsed.
...@@ -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',
......
...@@ -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 {
......
<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';
......
...@@ -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>
This diff is collapsed.
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