Skip to content

B
bims
Commit c32f4a01 authored by 周留芳's avatar 周留芳
Browse files
Options

回款详情样式优化

parent c816ef8f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 646 additions and 470 deletions
src/views/home/index.vue
View file @ c32f4a01
<template> <template>
<div class="white_bg burt-container"> <div class="white_bg burt-container">
<img src="../../assets/image/home_bg.jpg" alt=""> <img src="../../assets/image/home_bg.jpg" alt="">
</div> </div>
</template> </template>
<script> <script>
export default{ export default{
data(){ data(){
return{ return{
} }
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.burt-container{ .burt-container{
height: calc(100vh - 116px); height: calc(100vh - 86px);
padding: 0; padding: 0;
img{ img{
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
} }
} }
</style> </style>
\ No newline at end of file
src/views/layout/components/menu/subMenu.vue deleted 100644 → 0
View file @ c816ef8f
<template>
<div class="sub-menu">
<router-link
tag="button"
:class="{ btn: true, 'btn-active': isVisit(item.path) }"
v-for="(item, index) in menuStack"
:key="item.path"
:to="item.path"
>
{{ item.title }}
<Icon v-if="menuStack.length>1"
@click="(e)=>closeMenu(e, index)"
:name="isVisit(item.path) ? 'ssiclose_active' : 'ssiclose'"
:size="16"
/>
</router-link>
<slot name="tips" />
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
computed: {
...mapState({
menuStack: (state) => state.common.menuStack,
}),
},
methods: {
isVisit(val) {
const path = this.$route.path;
return path === val;
},
closeMenu(e, index) {
e.stopPropagation();
const menuStack = JSON.parse(JSON.stringify(this.menuStack));
const isVisit = this.isVisit(menuStack[index].path);
menuStack.splice(index, 1);
this.$store.commit("common/setMenuStack", menuStack);
if (isVisit) {
// 关闭的是当前正在查看的
const i = Math.max(0, index - 1);
this.$router.push(menuStack[i].path || "/");
}
},
},
};
</script>
<style lang="less" scoped>
.sub-menu {
width: 100%;
overflow-x: auto;
white-space: nowrap;
.mg-b(16);
.btn {
.fs(14);
.lh(20);
.pa(8, 13, 8, 13);
.mg-r(40);
color: #252631;
font-weight: bold;
border: none;
background-color: #fff;
border-radius: 5px;
cursor: pointer;
}
.btn-active {
color: #fff;
background-color: #2b63ff;
}
}
</style>
src/views/layout/index.vue
View file @ c32f4a01
<template> <template>
<div class="menu-layout"> <div class="menu-layout">
<Header></Header> <Header></Header>
<div class="container"> <div class="container">
<Menu></Menu> <Menu></Menu>
<Loading /> <Loading />
<div class="content"> <div class="content">
<SubMenu></SubMenu> <router-view />
<router-view /> </div>
</div> </div>
</div> </div>
</div> </template>
</template>
<script>
<script> import Header from "./components/Header.vue";
import Header from "./components/Header.vue"; import Menu from "./components/menu";
import Menu from "./components/menu"; import Loading from "@/components/Loading/Loading.vue";
import SubMenu from "./components/menu/subMenu.vue";
import Loading from "@/components/Loading/Loading.vue"; export default {
components: {
export default { Header,
components: { Menu,
Header, Loading
Menu, },
SubMenu, data() {
Loading return {};
}, },
data() {
return {}; created() {},
}, mounted() {},
methods: {},
created() {}, };
mounted() {}, </script>
methods: {},
}; <style>
</script> .icon-class.arrow{
position: absolute;
<style> right: 0;
.icon-class.arrow{ top: 50%;
position: absolute; transform: translateY(-50%);
right: 0; }
top: 50%; </style>
transform: translateY(-50%); <style lang="less" scoped>
} .menu-layout {
</style> background-color: #f8fafb;
<style lang="less" scoped> font-family: "Helvetica" "Microsoft YaHei" "微软雅黑";
.menu-layout { .container {
background-color: #f8fafb; display: flex;
font-family: "Helvetica" "Microsoft YaHei" "微软雅黑"; position: relative;
.container { .pt(68);
display: flex; // min-height: calc(100vh - 50px);
position: relative; .content {
.pt(68); position: relative;
// min-height: calc(100vh - 50px); flex: 1;
.content { .mg-l(242);
position: relative; .pa(14, 40, 0, 40);
flex: 1; min-height: calc(100vh - 68px);
.mg-l(242); overflow-x: hidden;
.pa(14, 40, 0, 40); }
min-height: calc(100vh - 68px); }
overflow-x: hidden; .menu {
} position: fixed;
} .w(242);
.menu { height: calc(100vh - 68px);
position: fixed; overflow: auto;
.w(242); background-color: #fff;
height: calc(100vh - 68px); li{
overflow: auto; position: relative;
background-color: #fff; }
li{ }
position: relative; }
} </style>
}
}
</style>
src/views/verification/collectionDetail.vue
View file @ c32f4a01
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