Commit ab098256 authored by xhx's avatar xhx

界面调整

parent 9e5cc3f7
<template> <template>
<div id="app"> <div id="app">
<keep-alive name="Mine"> <keep-alive include="MinePage">
<router-view v-if="cabilityChecked"></router-view> <router-view v-if="cabilityChecked"></router-view>
<div v-else>loading</div> <div v-else>loading</div>
</keep-alive> </keep-alive>
......
<template> <template>
<div class="w-full flex items-center justify-center mt-6"> <div class="w-full flex items-center justify-center mt-6 mb-6">
<div class="page-btn text-center text-xs rounded-l-lg flex items-center justify-center border border-solid border-app-blue-3" @click="goPage(1)"> <div class="page-btn text-center text-xs rounded-l-lg flex items-center justify-center border border-solid border-app-blue-3" @click="goPage(1)">
首页 首页
</div> </div>
......
<template> <template>
<div class="content px-6 mt-4 mb-16 overflow-x-hidden"> <div class="content px-6 mt-4 mb-16 overflow-x-hidden">
<template v-if="lists.length"> <template v-if="lists.length">
<router-link <div
v-for="item in communityList" v-for="item in communityList"
:key="item.id" :key="item.id"
class="w-full inline-block mb-3 text-white" class="w-full inline-block mb-3 text-white"
:to="{ path: tab === 1 ? '/Mine/MyCommunity' : '/Mine/AttendCommunity', query: {}}"> @click="goCommunity">
<card-two></card-two> <card-two></card-two>
</router-link> </div>
<div <div
v-for="item in projectList" v-for="item in projectList"
:key="item.id" :key="item.id"
...@@ -49,13 +49,20 @@ export default Vue.extend({ ...@@ -49,13 +49,20 @@ export default Vue.extend({
} }
}, },
methods: { methods: {
goCommunity() {
if (this.tab === 1) {
this.$router.push({path: '/Mine/MyCommunity'})
} else {
this.$router.push({path: '/Mine/AttendCommunity'})
}
},
goProject() { goProject() {
if (this.tab === 1) { if (this.tab === 1) {
this.$router.push({path: '/Mine/MyProject'}) this.$router.push({path: '/Mine/MyProject'})
} else { } else {
this.$router.push({path: '/Mine/AttendProject'}) this.$router.push({path: '/Mine/AttendProject'})
} }
} },
}, },
watch: { watch: {
tab(n) { tab(n) {
......
...@@ -12,12 +12,12 @@ ...@@ -12,12 +12,12 @@
<span class="text-sm">投票数</span> <span class="text-sm">投票数</span>
<span class="tet-xs">1200票</span> <span class="tet-xs">1200票</span>
</div> </div>
<div class="px-1 text-xs leading-10 flex justify-between items-center"> <div class="px-1 text-xs py-4 flex justify-between items-center">
<span>HASH</span> <span>HASH</span>
<span class="flex items-center" @click="goHash"> <div class="flex items-center tracking-tighter" @click="goHash">
l1z9e1beb62e754ff3704d8ba626d6…1c5a0 <span>l1z9e1beb62e754ff3704d8ba626d6…1c5a0</span>
<app-icon class="ml-1" customize size="12px" type='icon-arrow-right-copy-copy'></app-icon> <app-icon class="ml-0" customize size="12px" type='icon-arrow-right-copy-copy'></app-icon>
</span> </div>
</div> </div>
</div> </div>
</div> </div>
......
<template> <template>
<van-popup v-model="isShow" position="right" :style="{ width: '70%', height: '100vh'}"> <van-popup v-model="isShow" position="right" :style="{ width: '70%', height: '100%'}" @click-overlay="close">
<div class="relative w-full h-screen overflow-hidden"> <div class="relative w-full h-full overflow-hidden">
<div class="content px-5 pt-10 overflow-x-hidden"> <div class="content px-5 pt-10 overflow-x-hidden">
<h4 class="font-bold text-3xl mb-9">筛选</h4> <h4 class="font-bold text-3xl mb-9">筛选</h4>
<div> <div>
...@@ -84,6 +84,9 @@ export default Vue.extend({ ...@@ -84,6 +84,9 @@ export default Vue.extend({
}, },
submit() { submit() {
this.$emit('filterList', { status: this.status, type: this.isActive }) this.$emit('filterList', { status: this.status, type: this.isActive })
},
close() {
this.$emit('cancel', true)
} }
}, },
watch: { watch: {
...@@ -106,6 +109,6 @@ export default Vue.extend({ ...@@ -106,6 +109,6 @@ export default Vue.extend({
color: #fff color: #fff
} }
.content { .content {
height: calc(100vh - 40px); height: calc(100% - 40px);
} }
</style> </style>
\ No newline at end of file
...@@ -19,6 +19,13 @@ body{ ...@@ -19,6 +19,13 @@ body{
width: 100%; width: 100%;
} }
a:visited, a:active, a:hover {
color: white;
}
button:active, button:visited {
outline: none;
}
.vdpComponent{ .vdpComponent{
...@@ -66,6 +73,7 @@ body{ ...@@ -66,6 +73,7 @@ body{
.page-btn { .page-btn {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0;
box-sizing: border-box; box-sizing: border-box;
min-width: 36px; min-width: 36px;
height: 36px; height: 36px;
......
<template> <template>
<div class="flex flex-col"> <div class="flex flex-col">
<div class=" h-260px bg-squareBanner bg-center bg-cover bg-transparent bg-opacity-10 relative" ref="topBox"> <div class=" h-260px bg-squareBanner bg-center bg-cover bg-transparent bg-opacity-10 relative" ref="topBox">
<div class="flex flex-col justify-center items-center py-12" ref="textBox"> <div class="flex flex-col justify-center items-center py-12 pointer-events-none" ref="textBox">
<img src="@/assets/squareBanner-text.png" alt=""> <img src="@/assets/squareBanner-text.png" alt="">
</div> </div>
<div class='w-full absolute bottom-3 '> <div class='w-full absolute bottom-3 '>
...@@ -16,12 +16,12 @@ ...@@ -16,12 +16,12 @@
<div @click="doFilter"><app-icon type="icon-shaixuan" customize color=' text-white' ></app-icon></div> <div @click="doFilter"><app-icon type="icon-shaixuan" customize color=' text-white' ></app-icon></div>
</div> </div>
<div class="list w-full" @scroll="scrollStart" ref="botBox"> <div class="list w-full" @scroll="scrollStart" ref="botBox">
<router-link class="text-white" to="/Square/SquareVote"> <div class="text-white" @click="goVote">
<app-card class=" mb-2"></app-card> <app-card class=" mb-2"></app-card>
</router-link> </div>
<router-link class="text-white" to="/Square/SquareDetails"> <div class="text-white" @click="goDetails">
<app-card class=" mb-2"></app-card> <app-card class=" mb-2"></app-card>
</router-link> </div>
<app-card class=" mb-2"></app-card> <app-card class=" mb-2"></app-card>
<app-card class=" mb-2"></app-card> <app-card class=" mb-2"></app-card>
<app-card class=" mb-2"></app-card> <app-card class=" mb-2"></app-card>
...@@ -68,6 +68,7 @@ export default Vue.extend({ ...@@ -68,6 +68,7 @@ export default Vue.extend({
methods:{ methods:{
doFilter(){ doFilter(){
console.log(123); console.log(123);
console.log(this.showfilter)
this.showfilter = true this.showfilter = true
}, },
search() { search() {
...@@ -89,6 +90,12 @@ export default Vue.extend({ ...@@ -89,6 +90,12 @@ export default Vue.extend({
}, },
showhidden(v: boolean) { showhidden(v: boolean) {
this.showfilter = !v this.showfilter = !v
},
goVote() {
this.$router.push({path: '/Square/SquareVote'})
},
goDetails() {
this.$router.push({path: '/Square/SquareDetails'})
} }
} }
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div class="flex items-center justify-between leading-9"> <div class="flex items-center justify-between leading-9">
<div class="text-app-white">哈希</div> <div class="text-app-white">哈希</div>
<div class="flex items-center justify-between text-xs"> <div class="flex items-center justify-between text-xs">
<span class="inline-block mr-2 tracking-tight">1z9e1beb62e754ff3704d8ba626d6e29f761a1c5a0</span> <span class="inline-block mr-2 tracking-tight">1z9e1beb62e754ff3704d8ba626d6e...1c5a0</span>
<div <div
v-clipboard:copy="'hahahhahahahhaid'" v-clipboard:copy="'hahahhahahahhaid'"
v-clipboard:success="onCopy" v-clipboard:success="onCopy"
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="mx-4 py-4 border-app-blue-3 border border-solid rounded-lg bg-app-blue-4"> <div class="mx-4 py-4 border-app-blue-3 border border-solid rounded-lg bg-app-blue-4">
<div class="px-4 pb-4 border-b border-solid border-app-blue-3"> <div class="px-4 pb-4 border-b border-solid border-app-blue-3">
<div class="flex items-center justify-between mb-0 text-xs"> <div class="flex items-center justify-between mb-0 text-xs">
<span class="inline-block mr-2 tracking-tight">ID:1z9e1beb62e754ff3704d8ba626d6e29f761a1c5a0</span> <span class="inline-block mr-2 tracking-tighter">ID:1z9e1beb62e754ff3704d8ba626...1c5a0</span>
<div <div
v-clipboard:copy="'hahahhahahahhaid'" v-clipboard:copy="'hahahhahahahhaid'"
v-clipboard:success="onCopy" v-clipboard:success="onCopy"
......
...@@ -8,17 +8,23 @@ ...@@ -8,17 +8,23 @@
<p class="mb-0 px-4 pb-3 text-xs leading-normal border-0 border-b border-app-blue-1 border-solid">内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍</p> <p class="mb-0 px-4 pb-3 text-xs leading-normal border-0 border-b border-app-blue-1 border-solid">内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍</p>
</div> </div>
<div class="px-4 py-4"> <div class="px-4 py-4">
<div class="flex items-center justify-between mb-0 text-xs"> <div class="flex items-center justify-between mb-0 text-xs text-app-white">
<span class="inline-block mr-2 tracking-tight">ID:1z9e1beb62e754ff3704d8ba626d6e29f761a1c5a0</span> <div class="flex-shrink-0">
<div 地址
v-clipboard:copy="'hahahhahahahhaid'"
v-clipboard:success="onCopy"
v-clipboard:error="onError">
<app-icon customize size="16px" color="#FFBB00" type='icon-fuzhi'></app-icon>
</div> </div>
<div class="flex items-center">
<span class="inline-block mr-2 tracking-tighter">1z9e1beb62e754ff3704d8ba...c5a0</span>
<div
v-clipboard:copy="'hahahhahahahhaid'"
v-clipboard:success="onCopy"
v-clipboard:error="onError">
<app-icon customize size="16px" color="#FFBB00" type='icon-fuzhi'></app-icon>
</div>
</div>
</div> </div>
</div> </div>
<p class="mb-0 px-4 opacity-60 text-xs flex items-center justify-between"> <p class="mb-0 px-4 text-app-white text-xs flex items-center justify-between">
<span>当前总票数</span> <span>当前总票数</span>
<span>123464654票</span> <span>123464654票</span>
</p> </p>
......
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
<div> <div>
<child-view> <child-view>
<div class="sub-page"> <div class="sub-page">
<div class="mx-4 mb-5 py-3 px-2 text-xs border-app-blue-3 border border-solid rounded-lg bg-app-blue-4"> <div class="mx-4 mb-5 py-3 px-2 text-xs border-app-blue-3 border border-solid rounded-lg bg-app-blue-4 text-app-white">
<div class="flex items-center justify-between leading-9"> <div class="flex items-center justify-between leading-9">
<div class="text-app-white">哈希</div> <div class="flex-shrink-0">哈希</div>
<div class="flex items-center justify-between text-xs"> <div class="flex items-center justify-between text-xs">
<span class="inline-block mr-2 tracking-tight">1z9e1beb62e754ff3704d8ba626d6e29f761a1c5a0</span> <span class="inline-block mr-2 tracking-tighter">1z9e1beb62e754ff3704d8ba626d...c5a0</span>
<div <div
v-clipboard:copy="'hahahhahahahhaid'" v-clipboard:copy="'hahahhahahahhaid'"
v-clipboard:success="onCopy" v-clipboard:success="onCopy"
...@@ -16,19 +16,19 @@ ...@@ -16,19 +16,19 @@
</div> </div>
</div> </div>
<div class="flex items-center justify-between leading-9"> <div class="flex items-center justify-between leading-9">
<div class="text-app-white">区块高度</div> <div class="">区块高度</div>
<div>88925</div> <div>88925</div>
</div> </div>
<div class="flex items-center justify-between leading-9"> <div class="flex items-center justify-between leading-9">
<div class="text-app-white">投票数</div> <div class="">投票数</div>
<div>88925票</div> <div>88925票</div>
</div> </div>
<div class="flex items-center justify-between leading-9"> <div class="flex items-center justify-between leading-9">
<div class="text-app-white">投票时间</div> <div class="">投票时间</div>
<div>88925</div> <div>88925</div>
</div> </div>
<div class="flex items-center justify-between leading-9"> <div class="flex items-center justify-between leading-9">
<div class="text-app-white">手续费</div> <div class="">手续费</div>
<div>88925BTY</div> <div>88925BTY</div>
</div> </div>
</div> </div>
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div class="px-4 pb-4 border-0 border-b border-app-blue-3 border-solid"> <div class="px-4 pb-4 border-0 border-b border-app-blue-3 border-solid">
<p class="text-sm mb-3">社区名称</p> <p class="text-sm mb-3">社区名称</p>
<div class="flex items-center text-yellow-400 mb-0 text-xs justify-between"> <div class="flex items-center text-yellow-400 mb-0 text-xs justify-between">
<span class="inline-block mr-2 tracking-tight">ID:1z9e1beb62e754ff3704d8ba626d6e29f761a1c5a0</span> <span class="inline-block mr-2 tracking-tighter">ID:1z9e1beb62e75465da5s4dd...c5a0</span>
<div <div
v-clipboard:copy="'hahahhahahahhaid'" v-clipboard:copy="'hahahhahahahhaid'"
v-clipboard:success="onCopy" v-clipboard:success="onCopy"
...@@ -42,22 +42,6 @@ ...@@ -42,22 +42,6 @@
<div> <div>
<x-pagination :currentPage="currentPage" :totalPage="totalPage" @handleChange="handleChange" /> <x-pagination :currentPage="currentPage" :totalPage="totalPage" @handleChange="handleChange" />
</div> </div>
<!-- <div class="w-full flex items-center justify-center mt-6">
<div class="page-btn text-center text-xs rounded-l-lg flex items-center justify-center border border-solid border-app-blue-3" @click="goPage(1)">
首页
</div>
<van-pagination class="mb-0" v-model="currentPage" :page-count="totalPage">
<template #prev-text>
<van-icon name="arrow-left" />
</template>
<template #next-text>
<van-icon name="arrow" />
</template>
</van-pagination>
<div class="page-btn text-center text-xs rounded-r-lg flex items-center justify-center border border-solid border-app-blue-3" @click="goPage(totalPage)">
尾页
</div>
</div> -->
</div> </div>
</div> </div>
</child-view> </child-view>
...@@ -78,7 +62,7 @@ export default Vue.extend({ ...@@ -78,7 +62,7 @@ export default Vue.extend({
return { return {
currentPage: 5, currentPage: 5,
lists: [1,2,3,4,6,7,8,9,0], lists: [1,2,3,4,6,7,8,9,0],
totalPage: 10 totalPage: 110
} }
}, },
methods: { methods: {
......
...@@ -38,7 +38,7 @@ export default Vue.extend({ ...@@ -38,7 +38,7 @@ export default Vue.extend({
}, },
data() { data() {
return { return {
checked: true checked: false
} }
}, },
methods: { methods: {
......
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
</div> </div>
<div class="mt-3 px-3 flex items-center justify-between text-xs"> <div class="mt-3 px-3 flex items-center justify-between text-xs">
<div>ID</div> <div>ID</div>
<div class="flex items-center" @click="goProject"> <div class="flex items-center tracking-tighter" @click="goProject">
<span>jshhhdjsdfkdsKHLHJ94859837…yiyh</span> <span>jshhhdjsdfkdsKHLHJ94859837…yiyh</span>
<app-icon customize type='icon-arrow-right-copy-copy'></app-icon> <app-icon customize type='icon-arrow-right-copy-copy'></app-icon>
</div> </div>
......
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
<div class="mt-3 px-3 flex items-center justify-between text-xs"> <div class="mt-3 px-3 flex items-center justify-between text-xs">
<div>ID</div> <div>ID</div>
<div class="flex items-center" @click="goProject"> <div class="flex items-center" @click="goProject">
<span>jshhhdjsdfkdsKHLHJ94859837…yiyh</span> <span class="tracking-tighter">jshhhdjsdfkdsKHLHJ94859837…yiyh</span>
<app-icon customize type='icon-arrow-right-copy-copy'></app-icon> <app-icon customize type='icon-arrow-right-copy-copy'></app-icon>
</div> </div>
</div> </div>
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="p-4 border-0 border-b border-app-blue-3 border-solid"> <div class="p-4 border-0 border-b border-app-blue-3 border-solid">
<community-card /> <community-card />
</div> </div>
<div class="p-4 border-0 border-b border-app-blue-3 border-solid" :class="{'mb-40': hide}"> <div class="p-4 border-0 border-b border-app-blue-3 border-solid" :class="{'pb-44': hide}">
<div <div
v-for="(item, index) in lists" v-for="(item, index) in lists"
:key="index" :key="index"
...@@ -75,30 +75,30 @@ export default Vue.extend({ ...@@ -75,30 +75,30 @@ export default Vue.extend({
selected: true, selected: true,
content: '选项卡-选修课-选修课-' content: '选项卡-选修课-选修课-'
}, },
{ // {
selected: false, // selected: false,
content: '选项卡-选修课-选修课-' // content: '选项卡-选修课-选修课-'
}, // },
{ {
selected: false, selected: false,
content: '选项卡-选修课-选修课-选项卡-选修课-选修课-选项卡-选修课-选修课-选项卡-选修课-选修课-选项卡-选修课-选修课-选项卡-选修课-选修课-选项卡-选修课-选修课-' content: '选项卡-选修课-选修课-选项卡-选修课-选修课-选项卡-选修课-选修课-选项卡-选修课-选修课-选项卡-选修课-选修课-选项卡-选修课-选修课-选项卡-选修课-选修课-'
}, },
{ // {
selected: false, // selected: false,
content: '选项卡-选修课-选修课-' // content: '选项卡-选修课-选修课-'
}, // },
{ // {
selected: false, // selected: false,
content: '选项卡-选修课-选修课-' // content: '选项卡-选修课-选修课-'
}, // },
{ // {
selected: false, // selected: false,
content: '选项卡-选修课-选修课-' // content: '选项卡-选修课-选修课-'
}, // },
{ // {
selected: false, // selected: false,
content: '选项卡-选修课-选修课-' // content: '选项卡-选修课-选修课-'
}, // },
], ],
type1: true, type1: true,
voteNum: '', voteNum: '',
...@@ -147,15 +147,18 @@ export default Vue.extend({ ...@@ -147,15 +147,18 @@ export default Vue.extend({
// 计算底部样式 // 计算底部样式
// const height = document.body.clientHeight || document.documentElement.clientHeight // const height = document.body.clientHeight || document.documentElement.clientHeight
const height = window.innerHeight const height = window.innerHeight
this.hide = false
console.log(height) console.log(height)
console.log(box.scrollHeight) console.log(box.scrollHeight)
if (height < box.scrollHeight) { if (height + 50 < box.scrollHeight) {
this.hide = true this.hide = true
} else { } else {
this.hide = false this.hide = false
} }
window.onresize = () => { window.onresize = () => {
if (height < box.scrollHeight) { console.log(height)
console.log(box.scrollHeight)
if (height + 50 < box.scrollHeight) {
this.hide = true this.hide = true
} else { } else {
this.hide = false this.hide = false
......
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