优化前端展示界面

v1.0.0
youngS 3 years ago
parent a22d72e4d8
commit 6c0cde3b7f
  1. 15
      fir_client/src/components/FirBase.vue
  2. 2
      fir_client/src/components/FirHeader.vue
  3. 2
      fir_client/src/components/apps/FirAppInfosBase.vue
  4. 16
      fir_client/src/components/apps/FirApps.vue
  5. 111
      fir_client/src/components/base/BackToTop.vue
  6. 2
      fir_client/src/components/user/FirSuperSignBase.vue
  7. 2
      fir_client/src/components/user/FirUserOrders.vue
  8. 2
      fir_client/src/components/user/FirUserProfileBase.vue
  9. 2
      fir_client/src/components/user/FirUserStorage.vue

@ -12,6 +12,9 @@
<el-divider/> <el-divider/>
<FirFooter/> <FirFooter/>
</el-footer> </el-footer>
<el-tooltip placement="top" content="回到顶部">
<back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" />
</el-tooltip>
</el-container> </el-container>
</div> </div>
@ -20,14 +23,24 @@
<script> <script>
import FirHeader from "@/components/FirHeader"; import FirHeader from "@/components/FirHeader";
import FirFooter from "@/components/FirFooter"; import FirFooter from "@/components/FirFooter";
import BackToTop from "@/components/base/BackToTop";
import {show_beautpic,} from "@/utils"; import {show_beautpic,} from "@/utils";
export default { export default {
name: "FirBase", name: "FirBase",
components: {FirFooter, FirHeader}, components: {FirFooter, FirHeader, BackToTop},
data() { data() {
return { return {
'mousePosition': {}, 'mousePosition': {},
myBackToTopStyle: {
right: '80px',
bottom: '100px',
width: '40px',
height: '40px',
'border-radius': '4px',
'line-height': '45px',
background: '#e7eaf1'
}
} }
}, },
mounted() { mounted() {

@ -153,7 +153,7 @@
.el-container, .el-row { .el-container, .el-row {
margin: 10px auto; margin: 10px auto;
width: 1266px; width: 1166px;
} }
.navbar-wrapper { .navbar-wrapper {

@ -263,7 +263,7 @@
.page-app { .page-app {
padding-bottom: 0; padding-bottom: 0;
width: 1266px; width: 1166px;
margin: 10px auto 100px; margin: 10px auto 100px;
} }

@ -366,9 +366,10 @@
</el-row> </el-row>
</el-header> </el-header>
<div ref="appmain" style="margin: 40px 20px;height: 100%;width:1166px"> <div ref="appmain" style="margin: 40px 10px;height: 100%;width:1166px">
<el-row style="max-height: 460px; margin: 0 auto;" :gutter="10" class="page-apps"> <el-row style="max-height: 460px; margin: 0 auto;" :gutter="10" class="page-apps">
<el-col style="width: 30%;height: 460px ;margin-left: 3%">
<el-col style="width: 30%;height: 460px ;margin-left: 2%">
<div class=" app-animator appdownload"> <div class=" app-animator appdownload">
<div class=" card app card-ios" style="padding: 0"> <div class=" card app card-ios" style="padding: 0">
<el-upload <el-upload
@ -386,7 +387,7 @@
</div> </div>
</el-col> </el-col>
<el-col style="width: 30%;height: 460px;margin-left: 3%" <el-col style="width: 30%;height: 460px;margin-left: 2%"
v-for="(r,index) in applists" :key="r.id" @click="appInfos(index)"> v-for="(r,index) in applists" :key="r.id" @click="appInfos(index)">
<div class=" app-animator"> <div class=" app-animator">
@ -751,10 +752,7 @@
} }
}, },
auto_load() { auto_load() {
// eslint-disable-next-line no-console
// console.log(getScrollTop() , getWindowHeight(),getScrollTop() + getWindowHeight(), getScrollHeight());
if (getScrollTop() + getWindowHeight() >= getScrollHeight()) { if (getScrollTop() + getWindowHeight() >= getScrollHeight()) {
if (this.has_next) { // if (this.has_next) { //
if (this.autoloadflag) { if (this.autoloadflag) {
this.autoloadflag = false; this.autoloadflag = false;
@ -769,10 +767,6 @@
this.getappsFun(this.query); this.getappsFun(this.query);
} }
} else {
if (!this.has_next) {
this.$message.success("已经到底啦")
}
} }
} }
}, },
@ -990,7 +984,7 @@
<style scoped> <style scoped>
.el-container { .el-container {
margin: 10px auto 100px; margin: 10px auto 100px;
width: 1266px; width: 1166px;
position: relative; position: relative;
padding-bottom: 1px; padding-bottom: 1px;
color: #9b9b9b; color: #9b9b9b;

@ -0,0 +1,111 @@
<template>
<transition :name="transitionName">
<div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop">
<svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height:16px;width:16px"><path d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" /></svg>
</div>
</transition>
</template>
<script>
export default {
name: 'BackToTop',
props: {
visibilityHeight: {
type: Number,
default: 400
},
backPosition: {
type: Number,
default: 0
},
customStyle: {
type: Object,
default: function() {
return {
right: '50px',
bottom: '50px',
width: '40px',
height: '40px',
'border-radius': '4px',
'line-height': '45px',
background: '#e7eaf1'
}
}
},
transitionName: {
type: String,
default: 'fade'
}
},
data() {
return {
visible: false,
interval: null,
isMoving: false
}
},
mounted() {
window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll)
if (this.interval) {
clearInterval(this.interval)
}
},
methods: {
handleScroll() {
this.visible = window.pageYOffset > this.visibilityHeight
},
backToTop() {
if (this.isMoving) return
const start = window.pageYOffset
let i = 0
this.isMoving = true
this.interval = setInterval(() => {
const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
if (next <= this.backPosition) {
window.scrollTo(0, this.backPosition)
clearInterval(this.interval)
this.isMoving = false
} else {
window.scrollTo(0, next)
}
i++
}, 16.7)
},
easeInOutQuad(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b
return -c / 2 * (--t * (t - 2) - 1) + b
}
}
}
</script>
<style scoped>
.back-to-ceiling {
position: fixed;
display: inline-block;
text-align: center;
cursor: pointer;
}
.back-to-ceiling:hover {
background: #d5dbe7;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0
}
.back-to-ceiling .Icon {
fill: #9aaabf;
background: none;
}
</style>

@ -754,7 +754,7 @@
<style scoped> <style scoped>
.el-main { .el-main {
margin: 20px auto 100px; margin: 20px auto 100px;
width: 1266px; width: 1166px;
position: relative; position: relative;
padding-bottom: 1px; padding-bottom: 1px;
color: #9b9b9b; color: #9b9b9b;

@ -444,7 +444,7 @@
<style scoped> <style scoped>
.el-main { .el-main {
margin: 20px auto 100px; margin: 20px auto 100px;
width: 1266px; width: 1166px;
position: relative; position: relative;
padding-bottom: 1px; padding-bottom: 1px;
color: #9b9b9b; color: #9b9b9b;

@ -151,7 +151,7 @@
position: relative; position: relative;
text-align: center; text-align: center;
margin: 46px auto 100px; margin: 46px auto 100px;
width: 1266px; width: 1166px;
} }
.avatar { .avatar {

@ -541,7 +541,7 @@
.el-main { .el-main {
text-align: center; text-align: center;
margin: 20px auto 100px; margin: 20px auto 100px;
width: 1266px; width: 1166px;
position: relative; position: relative;
padding-bottom: 1px; padding-bottom: 1px;
color: #9b9b9b; color: #9b9b9b;

Loading…
Cancel
Save