登录页 首页等页面完善
This commit is contained in:
BianLzhaoMin
parent
9fd2fd854d
commit
8d89e1e291
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"tabWidth": 4,
|
||||
"singleQuote": true,
|
||||
"semi": false,
|
||||
"printWidth": 100,
|
||||
"trailingComma": "all",
|
||||
"endOfLine": "auto"
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ VITE_API_URL = '/proxyApi'
|
|||
# 开发环境接口地址
|
||||
# VITE_proxyTarget = 'http://10.40.92.74:8080' #盛旭
|
||||
|
||||
VITE_proxyTarget = 'http://192.168.2.72:8080' # 赵福海 (登录)
|
||||
VITE_proxyTarget = 'http://192.168.2.246:18080' # 马帅
|
||||
|
||||
# VITE_proxyTarget = 'http://10.40.92.185:9206' # 赵福海 ( 设备类型)
|
||||
# VITE_proxyTarget = 'http://10.40.92.16:9502' # 牛 (个人中心 基础信息企业申请认证)
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 878 KiB |
|
|
@ -1,19 +1,20 @@
|
|||
<script setup lang="ts">
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const navMenuList = [
|
||||
{ name: '首页', routerName: 'home' },
|
||||
{ name: '自选直租', routerName: 'equipList' },
|
||||
{ name: '寻源比价', routerName: 'parity' },
|
||||
{ name: '二手交易', routerName: '/home' },
|
||||
{ name: '保险业务', routerName: '/home' },
|
||||
{ name: '检验业务', routerName: '/home' },
|
||||
{ name: '企业专区', routerName: 'enterpriseZone' }
|
||||
]
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const navMenuList = [
|
||||
{ name: '首页', routerName: 'home' },
|
||||
{ name: '装备共享大厅', routerName: 'equipList' },
|
||||
{ name: '租赁需求大厅', routerName: 'parity' },
|
||||
{ name: '装备管理', routerName: '/home' },
|
||||
{ name: '订单管理', routerName: '/home' },
|
||||
{ name: '基础管理', routerName: '/home' },
|
||||
{ name: '消息通知', routerName: 'enterpriseZone' },
|
||||
{ name: '综合查询', routerName: 'enterpriseZone' },
|
||||
]
|
||||
|
||||
const navMenuClick = (name: any) => {
|
||||
router.push({ name })
|
||||
}
|
||||
const navMenuClick = (name: any) => {
|
||||
router.push({ name })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -22,39 +23,40 @@
|
|||
v-for="item in navMenuList"
|
||||
:key="item.name"
|
||||
@click="navMenuClick(item.routerName)"
|
||||
:class="{ active: route.meta.activeName === item.routerName }">
|
||||
:class="{ active: route.meta.activeName === item.routerName }"
|
||||
>
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nav-menu {
|
||||
height: 43px;
|
||||
background-color: #f7f9fa;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.nav-menu {
|
||||
height: 43px;
|
||||
background-color: #f7f9fa;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
li {
|
||||
color: #7d7d7d;
|
||||
padding: 0 20px;
|
||||
border-right: 1px solid #7d7d7d;
|
||||
li {
|
||||
color: #7d7d7d;
|
||||
padding: 0 20px;
|
||||
border-right: 1px solid #7d7d7d;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { get, post } from '../../index'
|
||||
|
||||
export const getGoodsClassListApi = () => {
|
||||
return get('/zlpt-home/maType/getEquipmentType', {})
|
||||
return get('/material-mall/maType/getEquipmentType', {})
|
||||
}
|
||||
|
||||
export const apiGetCollect = (params = {}) => {
|
||||
return post('/zlpt-equip/dev/userCollectList',params)
|
||||
return post('/zlpt-equip/dev/userCollectList', params)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,5 +2,9 @@ import { get, post } from '../../index'
|
|||
|
||||
// 登录接口
|
||||
export const loginApi = (data: any) => {
|
||||
return post('/zlpt-auth/login', data)
|
||||
return post('/auth/login', data)
|
||||
}
|
||||
// 获取用户信息
|
||||
export const getUserInfoAPI = () => {
|
||||
return get('/system/user/getInfo', {})
|
||||
}
|
||||
|
|
@ -1,81 +1,98 @@
|
|||
<script setup lang="ts">
|
||||
import $bus from "@/utils/bus";
|
||||
import { mainStore } from "store/main";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
const store = mainStore();
|
||||
import $bus from '@/utils/bus'
|
||||
import { mainStore } from 'store/main'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
const store: any = mainStore()
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const isRolesSelect = ref<boolean>(false)
|
||||
const rolesName = ref<string>('出租方')
|
||||
|
||||
// 是否显示退出登录
|
||||
const isShowLogout = computed(() => {
|
||||
return store.token;
|
||||
});
|
||||
// 是否显示退出登录
|
||||
const isShowLogout = computed(() => {
|
||||
return store.token
|
||||
})
|
||||
|
||||
const placeholderText = ref("请输入关键字");
|
||||
const placeholderText = ref('请输入关键字')
|
||||
|
||||
// 退出登录
|
||||
const handlerLogout = () => {
|
||||
ElMessageBox.confirm("是否确定退出登录", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
router.push("/login");
|
||||
store.cleanUpToken("");
|
||||
ElMessage({
|
||||
type: "success",
|
||||
message: "已退出登录",
|
||||
});
|
||||
// 退出登录
|
||||
const handlerLogout = () => {
|
||||
ElMessageBox.confirm('是否确定退出登录', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
router.push('/login')
|
||||
store.cleanUpToken('')
|
||||
store.clearUserInfo('')
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '已退出登录',
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: "info",
|
||||
message: "已取消",
|
||||
});
|
||||
});
|
||||
};
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '已取消',
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 搜索查询绑定值
|
||||
const keywordIptValue = ref("");
|
||||
// 搜索查询绑定值
|
||||
const keywordIptValue = ref('')
|
||||
|
||||
// 输入框 dom
|
||||
const inputRef: any = ref(null);
|
||||
// 输入框 dom
|
||||
const inputRef: any = ref(null)
|
||||
|
||||
// 输入框下方历史搜索记录
|
||||
// const searchHistoryList = computed(() => {
|
||||
// return store.searchHistoryList.slice(0, 1)
|
||||
// })
|
||||
// 输入框下方历史搜索记录
|
||||
// const searchHistoryList = computed(() => {
|
||||
// return store.searchHistoryList.slice(0, 1)
|
||||
// })
|
||||
|
||||
// 搜索按钮
|
||||
const searchKeywordBtn = () => {
|
||||
/* 去除空格 */
|
||||
keywordIptValue.value = keywordIptValue.value.replace(/\s*/g, "");
|
||||
// 搜索按钮
|
||||
const searchKeywordBtn = () => {
|
||||
/* 去除空格 */
|
||||
keywordIptValue.value = keywordIptValue.value.replace(/\s*/g, '')
|
||||
|
||||
store.addHistoryRecord(keywordIptValue.value);
|
||||
if (route.path == "/equipList") {
|
||||
$bus.emit("search", keywordIptValue.value);
|
||||
} else {
|
||||
router.push({
|
||||
name: "equipList",
|
||||
state: { keyWord: keywordIptValue.value },
|
||||
});
|
||||
}
|
||||
};
|
||||
store.addHistoryRecord(keywordIptValue.value)
|
||||
if (route.path == '/equipList') {
|
||||
$bus.emit('search', keywordIptValue.value)
|
||||
} else {
|
||||
router.push({
|
||||
name: 'equipList',
|
||||
state: { keyWord: keywordIptValue.value },
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 点击下方搜索记录时
|
||||
const handleHistory = (hisValue: any) => {
|
||||
keywordIptValue.value = hisValue;
|
||||
searchKeywordBtn();
|
||||
// inputRef.value.focus()
|
||||
};
|
||||
//页面刷新回显模糊搜索词
|
||||
$bus.on("callBackText", (val) => {
|
||||
nextTick(() => {
|
||||
keywordIptValue.value = val;
|
||||
});
|
||||
});
|
||||
// 点击下方搜索记录时
|
||||
const handleHistory = (hisValue: any) => {
|
||||
keywordIptValue.value = hisValue
|
||||
searchKeywordBtn()
|
||||
// inputRef.value.focus()
|
||||
}
|
||||
//页面刷新回显模糊搜索词
|
||||
$bus.on('callBackText', (val) => {
|
||||
nextTick(() => {
|
||||
keywordIptValue.value = val
|
||||
})
|
||||
})
|
||||
|
||||
// 角色切换按钮
|
||||
const onRolesCheck = () => {
|
||||
isRolesSelect.value = true
|
||||
}
|
||||
// 选择角色
|
||||
const onSelectRoles = (type: number) => {
|
||||
if (type === 1) {
|
||||
rolesName.value = '出租方'
|
||||
} else {
|
||||
rolesName.value = '承租方'
|
||||
}
|
||||
isRolesSelect.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -83,24 +100,44 @@
|
|||
<div class="header-container">
|
||||
<div class="header-user-info">
|
||||
<div class="header-box wapper">
|
||||
<div class="header-item">
|
||||
<!-- <img src="../assets/img/home/star.png" alt="" /> -->
|
||||
<a class="user-name">{{ store.userInfo.nickName }}</a>
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<span v-if="!isShowLogout">
|
||||
<a class="a-border-none" @click="$router.push('/login')"
|
||||
>登录</a
|
||||
>
|
||||
<a class="a-border-none" @click="$router.push('/login')">登录</a>
|
||||
<span style="margin: 0 3px">/</span>
|
||||
<a @click="$router.push('/register')">注册</a>
|
||||
<a style="padding: 0 20px 0 0" @click="$router.push('/register')">注册</a>
|
||||
</span>
|
||||
<span v-else>
|
||||
<a @click="handlerLogout">退出登录</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<a @click="$router.push({ name: 'myuser' })">个人中心</a>
|
||||
<div class="header-item roles-check" @click="onRolesCheck">
|
||||
<!-- <img src="../assets/img/home/star.png" alt="" /> -->
|
||||
<a style="display: flex; justify-content: center; padding-right: 10px">
|
||||
{{ rolesName }}
|
||||
<el-icon style="margin-left: 10px"><ArrowDownBold /></el-icon>
|
||||
</a>
|
||||
|
||||
<div class="select-list" v-if="isRolesSelect">
|
||||
<div
|
||||
style="border-top-left-radius: 6px; border-top-right-radius: 6px"
|
||||
@click.stop="onSelectRoles(1)"
|
||||
>
|
||||
出租方
|
||||
</div>
|
||||
<div
|
||||
style="border-bottom-left-radius: 6px; border-bottom-right-radius: 6px"
|
||||
@click.stop="onSelectRoles(2)"
|
||||
>
|
||||
承租方
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<img src="../assets/img/home/star.png" alt="" />
|
||||
<a @click="$router.push('/collect')">收藏夹</a>
|
||||
<a @click="$router.push({ name: 'myuser' })">个人中心</a>
|
||||
</div>
|
||||
<div class="header-item last-item">
|
||||
<img src="../assets/img/home/phone.png" alt="" />
|
||||
|
|
@ -110,7 +147,8 @@
|
|||
<div class="qr-code">
|
||||
<el-image
|
||||
src="https://img.xjishu.com/img/zl/2017/10/212257159687020.gif"
|
||||
fit="cover" />
|
||||
fit="cover"
|
||||
/>
|
||||
|
||||
扫二维码查看xxx
|
||||
</div>
|
||||
|
|
@ -125,7 +163,8 @@
|
|||
src="@/assets/img/home//机械化装备平台.png"
|
||||
alt="首页"
|
||||
title="首页"
|
||||
@click="$router.push('/home')" />
|
||||
@click="$router.push('/home')"
|
||||
/>
|
||||
|
||||
<input
|
||||
:placeholder="placeholderText"
|
||||
|
|
@ -134,7 +173,8 @@
|
|||
@keydown.enter="searchKeywordBtn"
|
||||
ref="inputRef"
|
||||
@focus="placeholderText = ''"
|
||||
@blur="placeholderText = '请输入关键字'" />
|
||||
@blur="placeholderText = '请输入关键字'"
|
||||
/>
|
||||
<button class="search-btn" @click="searchKeywordBtn">搜索</button>
|
||||
|
||||
<div class="ipt-down">
|
||||
|
|
@ -142,7 +182,8 @@
|
|||
v-for="item in store.searchHistoryList.slice(0, 4)"
|
||||
:key="item"
|
||||
@click="handleHistory(item)"
|
||||
class="history-box">
|
||||
class="history-box"
|
||||
>
|
||||
{{ item }}
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -151,148 +192,185 @@
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header-container {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
.header-container {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
|
||||
.header-user-info {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.header-user-info {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 头部个人信息部分 */
|
||||
.header-box {
|
||||
height: 37px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
/* 头部个人信息部分 */
|
||||
.header-box {
|
||||
height: 37px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.header-item {
|
||||
margin-left: 15px;
|
||||
height: 37px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 18px;
|
||||
.header-item {
|
||||
height: 37px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #6d6d6d;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
|
||||
.user-name:hover {
|
||||
color: #6d6d6d;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0 20px;
|
||||
border-right: 1px solid #666655;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #3cb4a6;
|
||||
}
|
||||
|
||||
.a-border-none {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.roles-check {
|
||||
position: relative;
|
||||
}
|
||||
.roles-check .select-list {
|
||||
height: 50px;
|
||||
// display: none;
|
||||
position: absolute;
|
||||
left: 1%;
|
||||
bottom: -46px;
|
||||
width: 98%;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
z-index: 999;
|
||||
transition: all 1s linear;
|
||||
|
||||
div {
|
||||
height: 25px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
a {
|
||||
border-right: 1px solid #666655;
|
||||
padding-right: 33px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #3cb4a6;
|
||||
}
|
||||
|
||||
.a-border-none {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.last-item {
|
||||
position: relative;
|
||||
z-index: 998;
|
||||
.qr-code {
|
||||
position: absolute;
|
||||
left: -70px;
|
||||
top: -140px;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
background-color: #fff;
|
||||
visibility: hidden;
|
||||
padding: 10px;
|
||||
box-shadow: 0 2px 2px 2px #ccc;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #333;
|
||||
.el-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
div:hover {
|
||||
color: #fff;
|
||||
background-color: #1967d2;
|
||||
}
|
||||
}
|
||||
|
||||
.last-item:hover > .qr-code {
|
||||
visibility: visible;
|
||||
transform: translateY(177px);
|
||||
transition: all 0.6s;
|
||||
}
|
||||
// .roles-check:hover .select-list {
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
/* 中间logo 搜索框部分 */
|
||||
.logo-ipt-container {
|
||||
position: relative;
|
||||
.last-item {
|
||||
position: relative;
|
||||
z-index: 998;
|
||||
padding-left: 20px;
|
||||
.qr-code {
|
||||
position: absolute;
|
||||
left: -70px;
|
||||
top: -140px;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
background-color: #fff;
|
||||
visibility: hidden;
|
||||
padding: 10px;
|
||||
box-shadow: 0 2px 2px 2px #ccc;
|
||||
display: flex;
|
||||
background-color: #eeeff6;
|
||||
padding: 30px 0;
|
||||
|
||||
img {
|
||||
width: 240px;
|
||||
height: 58px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 700px;
|
||||
height: 45px;
|
||||
border: 1px solid #3cb4a6;
|
||||
border-radius: 45px;
|
||||
margin-left: 70px;
|
||||
line-height: 45px;
|
||||
color: #333;
|
||||
text-shadow: 0 0 0 #333;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: 1px solid #3cb4a6;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
color: #949494;
|
||||
}
|
||||
.search-btn {
|
||||
width: 100px;
|
||||
height: 39px;
|
||||
transform: translate(-110px, 4px);
|
||||
border-radius: 39px;
|
||||
background: linear-gradient(132deg, #22ab9b 0%, #0d7462 100%);
|
||||
box-shadow: 0px 2px 4px 0px rgba(20, 175, 255, 0.5);
|
||||
border: none;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.ipt-down {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: 22%;
|
||||
overflow: hidden;
|
||||
|
||||
a {
|
||||
max-width: 140px;
|
||||
padding: 0 10px;
|
||||
color: #727272;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #333;
|
||||
.el-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.last-item:hover > .qr-code {
|
||||
visibility: visible;
|
||||
transform: translateY(177px);
|
||||
transition: all 0.6s;
|
||||
}
|
||||
|
||||
/* 中间logo 搜索框部分 */
|
||||
.logo-ipt-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
background-color: #eeeff6;
|
||||
padding: 30px 0;
|
||||
|
||||
img {
|
||||
width: 240px;
|
||||
height: 58px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 700px;
|
||||
height: 45px;
|
||||
border: 1px solid #3cb4a6;
|
||||
border-radius: 45px;
|
||||
margin-left: 70px;
|
||||
line-height: 45px;
|
||||
color: #333;
|
||||
text-shadow: 0 0 0 #333;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: 1px solid #3cb4a6;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
color: #949494;
|
||||
}
|
||||
.search-btn {
|
||||
width: 100px;
|
||||
height: 39px;
|
||||
transform: translate(-110px, 4px);
|
||||
border-radius: 39px;
|
||||
background: linear-gradient(132deg, #22ab9b 0%, #0d7462 100%);
|
||||
box-shadow: 0px 2px 4px 0px rgba(20, 175, 255, 0.5);
|
||||
border: none;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.ipt-down {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: 22%;
|
||||
overflow: hidden;
|
||||
|
||||
a {
|
||||
max-width: 140px;
|
||||
padding: 0 10px;
|
||||
color: #727272;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -39,6 +39,10 @@ export const mainStore = defineStore('main', {
|
|||
/* 添加用户信息 */
|
||||
setUserInfo(val: any) {
|
||||
this.userInfo = val
|
||||
},
|
||||
/* 清除用户信息 */
|
||||
clearUserInfo() {
|
||||
this.userInfo = {}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,44 +1,66 @@
|
|||
<script setup lang="ts">
|
||||
import { loginApi } from 'http/api/login/index'
|
||||
import { loginApi, getUserInfoAPI } from 'http/api/login/index'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { User, Lock } from '@element-plus/icons-vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { mainStore } from 'store/main'
|
||||
const userStore = mainStore()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const route: any = useRoute()
|
||||
const rememberPassword = ref<Boolean>(false)
|
||||
const loginForm = ref({
|
||||
username: '',
|
||||
password: ''
|
||||
username: localStorage.getItem('username') || '',
|
||||
password: localStorage.getItem('password') || '',
|
||||
loginType: 'USERNAME_PASSWORD',
|
||||
code: '',
|
||||
phoneUuid: '',
|
||||
uuid: '',
|
||||
verificationCode: '',
|
||||
})
|
||||
|
||||
if (localStorage.getItem('username') && localStorage.getItem('password')) {
|
||||
rememberPassword.value = true
|
||||
}
|
||||
|
||||
const handlerLogin = async () => {
|
||||
const res: any = await loginApi(loginForm.value)
|
||||
console.log('登录成功**', res)
|
||||
if (res.code === 200) {
|
||||
userStore.setToken(res.data.access_token)
|
||||
const result: any = await getUserInfoAPI()
|
||||
console.log(result, '用户信息')
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: '登录成功',
|
||||
type: 'success'
|
||||
type: 'success',
|
||||
})
|
||||
userStore.setToken(res.data.access_token)
|
||||
if (res.data.user) {
|
||||
userStore.setUserInfo(res.data.user)
|
||||
|
||||
userStore.setUserInfo(result.user)
|
||||
|
||||
if (rememberPassword.value) {
|
||||
localStorage.setItem('username', loginForm.value.username)
|
||||
localStorage.setItem('password', loginForm.value.password)
|
||||
} else {
|
||||
userStore.setUserInfo({
|
||||
phonenumber: '',
|
||||
companyName: '',
|
||||
logoUrl:
|
||||
'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/2023/12/09/815629f192564db98ac55a643b46f853gouwu.png'
|
||||
})
|
||||
localStorage.setItem('username', '')
|
||||
localStorage.setItem('password', '')
|
||||
}
|
||||
// userStore.setToken(res.data.access_token);
|
||||
// if (res.data.user) {
|
||||
// userStore.setUserInfo(res.data.user);
|
||||
// } else {
|
||||
// userStore.setUserInfo({
|
||||
// phonenumber: "",
|
||||
// companyName: "",
|
||||
// logoUrl:
|
||||
// "https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/2023/12/09/815629f192564db98ac55a643b46f853gouwu.png",
|
||||
// });
|
||||
// }
|
||||
// 跳转登录页面
|
||||
|
||||
if (route.query && route.query.redirect) {
|
||||
router.push(decodeURIComponent(route.query.redirect))
|
||||
} else {
|
||||
router.push('/home')
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -46,28 +68,61 @@ const handlerLogin = async () => {
|
|||
<template>
|
||||
<div class="login-container">
|
||||
<div class="login-form">
|
||||
<h3>机具租赁共享平台</h3>
|
||||
<h3>机械化装备共享平台</h3>
|
||||
|
||||
<div class="form-container">
|
||||
<div class="login-type">
|
||||
<!-- <div class="login-type">
|
||||
<div class="active">账号登录</div>
|
||||
<div>手机登录</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<el-form>
|
||||
<el-form-item>
|
||||
<el-input v-model="loginForm.username" placeholder="账号" clearable />
|
||||
<h3 style="margin: 0; font-size: 20px">您好，欢迎登录</h3>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="loginForm.password" placeholder="密码" clearable type="password" show-password />
|
||||
<el-input
|
||||
:prefix-icon="User"
|
||||
v-model.trim="loginForm.username"
|
||||
placeholder="请输入账号"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handlerLogin">登 录</el-button>
|
||||
<el-input
|
||||
:prefix-icon="Lock"
|
||||
v-model.trim="loginForm.password"
|
||||
placeholder="请输入密码"
|
||||
clearable
|
||||
type="password"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="forget-password">
|
||||
|
||||
<el-form-item>
|
||||
<div class="remember-me">
|
||||
<el-checkbox size="large" v-model="rememberPassword">
|
||||
记住密码
|
||||
</el-checkbox>
|
||||
<a href="#">忘记密码</a>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
style="background-color: #009a91; padding: 20px 0"
|
||||
type="primary"
|
||||
@click="handlerLogin"
|
||||
>立 即 登 录</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item class="forget-password">
|
||||
<a href=""></a>
|
||||
<a style="cursor: pointer" @click="$router.push('/register')">立即注册</a>
|
||||
</el-form-item>
|
||||
<a
|
||||
style="cursor: pointer"
|
||||
@click="$router.push('/register')"
|
||||
>立即注册</a
|
||||
>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -81,28 +136,29 @@ const handlerLogin = async () => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: url('../assets/img/home/2023_12_01_beijing2/login_bgnew.png') no-repeat;
|
||||
background: url('../assets/img/login_bg.png') no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
.login-form {
|
||||
width: 500px;
|
||||
height: 360px;
|
||||
// height: 360px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
h3 {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
color: #006461;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 26px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #c7dff4;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
|
||||
.login-type {
|
||||
|
|
@ -129,10 +185,10 @@ const handlerLogin = async () => {
|
|||
}
|
||||
|
||||
.el-form {
|
||||
padding: 0 50px;
|
||||
padding: 30px 50px 0;
|
||||
|
||||
.el-input {
|
||||
height: 37px;
|
||||
height: 47px;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
|
|
@ -149,6 +205,26 @@ const handlerLogin = async () => {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.el-input .el-input__icon {
|
||||
font-size: 18px;
|
||||
color: #009a91;
|
||||
}
|
||||
}
|
||||
|
||||
.remember-me {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #009a91;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,81 +1,81 @@
|
|||
<script setup lang="ts">
|
||||
import EquipCard from "components/equipCard.vue";
|
||||
import NavMenu from "components/Navmenu/index.vue";
|
||||
import { getGoodsClassListApi } from "http/api/home";
|
||||
import { mainStore } from "store/main";
|
||||
import { getHotList } from "http/api/equip";
|
||||
import { reactive, ref } from "vue";
|
||||
import baseData from "@/assets/baseInformation.json";
|
||||
import EquipCard from 'components/equipCard.vue'
|
||||
import NavMenu from 'components/Navmenu/index.vue'
|
||||
import { getGoodsClassListApi } from 'http/api/home'
|
||||
import { mainStore } from 'store/main'
|
||||
import { getHotList } from 'http/api/equip'
|
||||
import { reactive, ref } from 'vue'
|
||||
import baseData from '@/assets/baseInformation.json'
|
||||
|
||||
const router = useRouter();
|
||||
const router = useRouter()
|
||||
|
||||
const leftNavList = ref([]);
|
||||
const leftNavList: any = ref([])
|
||||
|
||||
const loopList = ref([
|
||||
"https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png",
|
||||
"https://jmy-pic.baidu.com/0/pic/-1857035387_-1067811148_-1621691324.png",
|
||||
]);
|
||||
// 获取商品分类
|
||||
const getGoodsClassList = async () => {
|
||||
const res = await getGoodsClassListApi();
|
||||
console.log(res, "商品分类列表");
|
||||
const loopList = ref([
|
||||
'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png',
|
||||
'https://jmy-pic.baidu.com/0/pic/-1857035387_-1067811148_-1621691324.png',
|
||||
])
|
||||
// 获取商品分类
|
||||
const getGoodsClassList = async () => {
|
||||
const res: any = await getGoodsClassListApi()
|
||||
console.log(res, '商品分类列表')
|
||||
|
||||
leftNavList.value = res.rows;
|
||||
};
|
||||
leftNavList.value = res.rows
|
||||
}
|
||||
|
||||
getGoodsClassList();
|
||||
getGoodsClassList()
|
||||
|
||||
const handlerGoodsDetails = (...arg) => {
|
||||
const arr = arg.map((key, index) => {
|
||||
return {
|
||||
level: index + 1 + "",
|
||||
typeId: key.id,
|
||||
typeName: key.name,
|
||||
};
|
||||
});
|
||||
const handlerGoodsDetails = (...arg) => {
|
||||
const arr = arg.map((key, index) => {
|
||||
return {
|
||||
level: index + 1 + '',
|
||||
typeId: key.id,
|
||||
typeName: key.name,
|
||||
}
|
||||
})
|
||||
|
||||
router.push({
|
||||
name: "equipList",
|
||||
state: { typeTag: arr },
|
||||
});
|
||||
};
|
||||
router.push({
|
||||
name: 'equipList',
|
||||
state: { typeTag: arr },
|
||||
})
|
||||
}
|
||||
|
||||
const goInformation = (id) => {
|
||||
router.push({
|
||||
path: `/consultationDetails/${id}`,
|
||||
});
|
||||
};
|
||||
const goInformation = (id) => {
|
||||
router.push({
|
||||
path: `/consultationDetails/${id}`,
|
||||
})
|
||||
}
|
||||
|
||||
const detailsList = ref([]);
|
||||
const detailsList = ref([])
|
||||
|
||||
const handelInformation = () => {
|
||||
detailsList.value = baseData.map((item) => {
|
||||
return {
|
||||
v_title: item.title,
|
||||
v_content_info: "",
|
||||
v_time: `[${item.create_time}]`,
|
||||
id: item.id,
|
||||
};
|
||||
});
|
||||
};
|
||||
handelInformation();
|
||||
const handelInformation = () => {
|
||||
detailsList.value = baseData.map((item) => {
|
||||
return {
|
||||
v_title: item.title,
|
||||
v_content_info: '',
|
||||
v_time: `[${item.create_time}]`,
|
||||
id: item.id,
|
||||
}
|
||||
})
|
||||
}
|
||||
handelInformation()
|
||||
|
||||
const hotDeviceList: any = ref([]);
|
||||
const hotDeviceList: any = ref([])
|
||||
|
||||
/* 获取热搜装备 */
|
||||
const getHotDeviceList = async () => {
|
||||
const res: any = await getHotList({ pageSize: 3 });
|
||||
/* 获取热搜装备 */
|
||||
const getHotDeviceList = async () => {
|
||||
const res: any = await getHotList({ pageSize: 3 })
|
||||
|
||||
hotDeviceList.value = res.rows;
|
||||
console.log(res, "热搜装备111");
|
||||
};
|
||||
hotDeviceList.value = res.rows
|
||||
console.log(res, '热搜装备111')
|
||||
}
|
||||
|
||||
getHotDeviceList();
|
||||
getHotDeviceList()
|
||||
|
||||
/* 热搜卡片点击跳转至详情页 */
|
||||
const onClick = (val: any) => {
|
||||
router.push(`/equipDetail/${val.id}`);
|
||||
};
|
||||
/* 热搜卡片点击跳转至详情页 */
|
||||
const onClick = (val: any) => {
|
||||
router.push(`/equipDetail/${val.id}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -85,30 +85,68 @@
|
|||
<div class="home-goods">
|
||||
<ul class="left-nav">
|
||||
<!-- 左侧机械名称菜单按钮 -->
|
||||
<li
|
||||
class="item-nav"
|
||||
v-for="item in leftNavList"
|
||||
:key="item.name">
|
||||
<li class="item-nav" v-for="item in leftNavList" :key="item.name">
|
||||
{{ item.name }}
|
||||
<ul class="sub-goods">
|
||||
<!-- 级联框内 类别名称 -->
|
||||
<li v-for="child in item.children" :key="child.id">
|
||||
<span>{{ child.name }}</span>
|
||||
<!-- 第二级 -->
|
||||
<span class="second-name">
|
||||
{{ child.name }}
|
||||
</span>
|
||||
|
||||
<span
|
||||
style="
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
"
|
||||
>
|
||||
<span
|
||||
v-for="son in child.children"
|
||||
:key="son.id"
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
"
|
||||
>
|
||||
<!-- {{ son.name }} -->
|
||||
|
||||
<span style="width: 30%">
|
||||
{{ son.name }}
|
||||
</span>
|
||||
|
||||
<span style="width: 70%; display: flex; flex-wrap: wrap">
|
||||
<span
|
||||
v-for="son_1 in son.children"
|
||||
:key="son_1.id"
|
||||
style="
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
padding: 0 2px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
"
|
||||
class="last-level"
|
||||
>
|
||||
{{ son_1.name }}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<!-- <span>{{ child.name }}</span>
|
||||
<span>
|
||||
<!-- 小类名称 -->
|
||||
<a
|
||||
v-for="son in child.children"
|
||||
:key="son.id"
|
||||
@click="
|
||||
handlerGoodsDetails(
|
||||
item,
|
||||
child,
|
||||
son
|
||||
)
|
||||
">
|
||||
@click="handlerGoodsDetails(item, child, son)"
|
||||
>
|
||||
{{ son.name }}
|
||||
</a>
|
||||
</span>
|
||||
</span> -->
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
@ -117,19 +155,18 @@
|
|||
<!-- 轮播图上方导航按钮 -->
|
||||
<NavMenu />
|
||||
<!-- 轮播图 -->
|
||||
<div class="swpier-img">
|
||||
<el-carousel
|
||||
:interval="5000"
|
||||
arrow="always"
|
||||
height="437px">
|
||||
<div class="swiper-img">
|
||||
<el-carousel :interval="5000" arrow="always" style="height: 100%">
|
||||
<el-carousel-item
|
||||
v-for="(item, index) in loopList"
|
||||
:key="index">
|
||||
<!-- <h3 text="2xl" justify="center">{{ item }}</h3> -->
|
||||
:key="index"
|
||||
style="height: 100%"
|
||||
>
|
||||
<el-image
|
||||
style="width: 100%"
|
||||
style="width: 100%; height: 100%"
|
||||
:src="item"
|
||||
fit="cover" />
|
||||
fit="cover"
|
||||
/>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
|
|
@ -142,21 +179,16 @@
|
|||
</div>
|
||||
|
||||
<ul class="equip-pic">
|
||||
<li
|
||||
v-for="item in hotDeviceList"
|
||||
:key="item.maId"
|
||||
style="cursor: pointer">
|
||||
<li v-for="item in hotDeviceList" :key="item.maId" style="cursor: pointer">
|
||||
<EquipCard
|
||||
@onClick="onClick"
|
||||
:company="item.companyName || '安徽博诺斯有限公司'"
|
||||
:price="item.monthLeasePrice"
|
||||
:tags="[
|
||||
item.maStatusStr || '待租',
|
||||
item.cityStr || '合肥',
|
||||
]"
|
||||
:tags="[item.maStatusStr || '待租', item.cityStr || '合肥']"
|
||||
:name="item.modelName + item.deviceName"
|
||||
:url="item.picUrl"
|
||||
:id="item.maId" />
|
||||
:id="item.maId"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
@ -192,7 +224,8 @@
|
|||
class="consult-box"
|
||||
@click="goInformation(item.id)"
|
||||
v-for="item in detailsList"
|
||||
:key="item.v_time">
|
||||
:key="item.v_time"
|
||||
>
|
||||
<div class="consult-title">
|
||||
<h3>{{ item.v_title }}</h3>
|
||||
<span>{{ item.v_time }}</span>
|
||||
|
|
@ -209,223 +242,244 @@
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-carousel__container) {
|
||||
.el-carousel__item {
|
||||
.el-image {
|
||||
height: 100%;
|
||||
img {
|
||||
}
|
||||
:deep(.el-carousel__container) {
|
||||
.el-carousel__item {
|
||||
.el-image {
|
||||
height: 100%;
|
||||
img {
|
||||
}
|
||||
}
|
||||
}
|
||||
.home-index-banner {
|
||||
background-color: #fff;
|
||||
padding: 20px 15px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.home-index-banner {
|
||||
background-color: #fff;
|
||||
padding: 20px 15px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.home-index {
|
||||
.home-goods {
|
||||
height: 500px;
|
||||
.home-index {
|
||||
.home-goods {
|
||||
height: 500px;
|
||||
display: flex;
|
||||
|
||||
.left-nav {
|
||||
position: relative;
|
||||
// margin-top: 8px;
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
// background-color: #f7f9fa;
|
||||
background-color: #6599ed;
|
||||
flex-direction: column;
|
||||
// justify-content: space-around;
|
||||
|
||||
.left-nav {
|
||||
position: relative;
|
||||
margin-top: 8px;
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background-color: #f7f9fa;
|
||||
flex-direction: column;
|
||||
// justify-content: space-around;
|
||||
.item-nav {
|
||||
// text-align: left;
|
||||
// padding-left: 50px;
|
||||
color: #fff;
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
text-align: center;
|
||||
font-size: 16px !important;
|
||||
|
||||
.item-nav {
|
||||
// text-align: left;
|
||||
// padding-left: 50px;
|
||||
color: #8b8b8b;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
// color: #2282ff;
|
||||
// font-weight: bold;
|
||||
background-color: #1abc9c;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #2282ff;
|
||||
font-weight: bold;
|
||||
background-color: #1abc9c;
|
||||
|
||||
.sub-goods {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-goods {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 0;
|
||||
left: 200px;
|
||||
width: 500px;
|
||||
height: 100%;
|
||||
background-color: #f5f4f4;
|
||||
z-index: 999;
|
||||
opacity: 0.9;
|
||||
|
||||
li {
|
||||
margin: 15px 0;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
|
||||
span:first-child {
|
||||
width: 160px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
span a {
|
||||
margin: 0 15px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.sub-goods {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-content {
|
||||
.sub-goods {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 0;
|
||||
left: 200px;
|
||||
width: 915px;
|
||||
max-height: 100%;
|
||||
background-color: #f5f4f4;
|
||||
z-index: 999;
|
||||
// opacity: 0.9;
|
||||
border: 1px solid #333;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
li {
|
||||
// margin: 10px 0;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
|
||||
.second-name {
|
||||
width: 160px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
span a {
|
||||
margin: 0 15px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.last-level {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.last-level:hover {
|
||||
color: #1abc9c;
|
||||
border-bottom: 1px solid #1abc9c !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-content {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.swiper-img {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
margin-left: 20px;
|
||||
border-radius: 8px;
|
||||
|
||||
.swpier-img {
|
||||
width: 100%;
|
||||
height: 437px;
|
||||
margin-top: 10px;
|
||||
border-radius: 8px;
|
||||
// .el-carousel {
|
||||
// height: 100%;
|
||||
|
||||
.el-carousel {
|
||||
height: 437px;
|
||||
}
|
||||
// .el-carousel__container {
|
||||
// height: 100%;
|
||||
// }
|
||||
// }
|
||||
|
||||
.el-carousel__item h3 {
|
||||
color: #475669;
|
||||
opacity: 0.75;
|
||||
line-height: 300px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
// .el-carousel__item h3 {
|
||||
// color: #475669;
|
||||
// opacity: 0.75;
|
||||
// line-height: 300px;
|
||||
// margin: 0;
|
||||
// text-align: center;
|
||||
// }
|
||||
|
||||
.el-carousel__item:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
// .el-carousel__item:nth-child(2n) {
|
||||
// background-color: #99a9bf;
|
||||
// }
|
||||
|
||||
.el-carousel__item:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
}
|
||||
// .el-carousel__item:nth-child(2n + 1) {
|
||||
// background-color: #d3dce6;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hot-equip {
|
||||
margin-top: 30px;
|
||||
height: 37px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.hot-equip {
|
||||
margin-top: 30px;
|
||||
height: 37px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
span {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
span {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #9d9d9d;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.equip-pic {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
li {
|
||||
width: calc((100% - 30px) / 3);
|
||||
&:nth-child(2n) {
|
||||
margin: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #9d9d9d;
|
||||
font-size: 14px;
|
||||
.consult-nav {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
|
||||
li {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin: 0 15px;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px solid #3cb4a6;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.equip-pic {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
li {
|
||||
width: calc((100% - 30px) / 3);
|
||||
&:nth-child(2n) {
|
||||
margin: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.consult-content {
|
||||
margin-top: 20px;
|
||||
height: 210px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.consult-nav {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
|
||||
li {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin: 0 15px;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px solid #3cb4a6;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.consult-content {
|
||||
margin-top: 20px;
|
||||
.left-bg {
|
||||
background: url(../../assets/img/home/2023_12_01_beijing2/left_bg.png) no-repeat;
|
||||
background-size: cover;
|
||||
width: 340px;
|
||||
height: 210px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left-bg {
|
||||
background: url(../../assets/img/home/2023_12_01_beijing2/left_bg.png)
|
||||
no-repeat;
|
||||
background-size: cover;
|
||||
width: 340px;
|
||||
height: 210px;
|
||||
}
|
||||
.right-consult {
|
||||
height: 210px;
|
||||
flex: 1;
|
||||
width: calc(100% - 340px);
|
||||
// padding-left: 35px;
|
||||
overflow-y: auto;
|
||||
.consult-box {
|
||||
margin-bottom: 10px;
|
||||
//height: 70px;
|
||||
padding-left: 15px;
|
||||
cursor: pointer;
|
||||
.consult-title {
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.right-consult {
|
||||
height: 210px;
|
||||
flex: 1;
|
||||
width: calc(100% - 340px);
|
||||
// padding-left: 35px;
|
||||
overflow-y: auto;
|
||||
.consult-box {
|
||||
margin-bottom: 10px;
|
||||
//height: 70px;
|
||||
padding-left: 15px;
|
||||
cursor: pointer;
|
||||
.consult-title {
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #827d7d;
|
||||
font-size: 14px;
|
||||
}
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.consult-info {
|
||||
width: calc(100% - 100px);
|
||||
height: 10px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px dashed #979797;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
span {
|
||||
color: #827d7d;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.consult-info {
|
||||
width: calc(100% - 100px);
|
||||
height: 10px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px dashed #979797;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-carousel__container {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue