260720
This commit is contained in:
195
components/common-hero/common-hero.vue
Normal file
195
components/common-hero/common-hero.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<view class="hero-section" :style="heroStyle">
|
||||
<!-- <view class="hero-bg hero-bg-left"></view>-->
|
||||
<!-- <view class="hero-bg hero-bg-right"></view>-->
|
||||
|
||||
<view class="navbar" :style="navbarStyle">
|
||||
<view class="navbar-inner">
|
||||
<view class="navbar-left" v-if="showBack">
|
||||
<view class="nav-back-btn" @tap="handleBack">
|
||||
<uv-icon name="arrow-left" color="#101214" size="22"></uv-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="navbar-title">{{ title }}</view>
|
||||
<view class="navbar-right-placeholder"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="navbar-spacer" :style="{ height: navbarHeight + 'px' }"></view>
|
||||
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const TAB_BAR_PATHS = ['/pages/index/index', '/pages/assistant/index', '/pages/mine/index']
|
||||
|
||||
export default {
|
||||
name: 'CommonHero',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
useImageBg: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
backgroundImage: {
|
||||
type: String,
|
||||
default: '/static/indexBg.jpg'
|
||||
},
|
||||
reduceTop: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: 0,
|
||||
currentRoute: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showBack() {
|
||||
return TAB_BAR_PATHS.indexOf(this.currentRoute) === -1
|
||||
},
|
||||
navbarHeight() {
|
||||
return this.statusBarHeight + uni.upx2px(88) - uni.upx2px(this.reduceTop)
|
||||
},
|
||||
navbarStyle() {
|
||||
return {
|
||||
paddingTop: `${this.statusBarHeight}px`
|
||||
}
|
||||
},
|
||||
heroStyle() {
|
||||
if (this.useImageBg) {
|
||||
return {
|
||||
backgroundImage: `url('${this.backgroundImage}')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center top',
|
||||
backgroundRepeat: 'no-repeat'
|
||||
}
|
||||
}
|
||||
return {
|
||||
background: 'linear-gradient(180deg, #f7fbff 0%, #d9f0ff 44%, #f4fbff 100%)'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const { statusBarHeight = 0 } = uni.getSystemInfoSync()
|
||||
this.statusBarHeight = statusBarHeight
|
||||
const pages = getCurrentPages()
|
||||
const currentPage = pages[pages.length - 1]
|
||||
const route = currentPage && currentPage.route ? currentPage.route : ''
|
||||
this.currentRoute = route ? `/${route}` : ''
|
||||
},
|
||||
methods: {
|
||||
handleBack() {
|
||||
const pages = getCurrentPages()
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hero-section {
|
||||
position: relative;
|
||||
//padding: 0 0 30rpx;
|
||||
overflow: hidden;
|
||||
backgroud: url('@/static/indexBg.jpg');
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(8rpx);
|
||||
opacity: 0.9;
|
||||
backgroud: url('@/static/indexBg.jpg');
|
||||
}
|
||||
|
||||
.hero-bg-left {
|
||||
top: 84rpx;
|
||||
left: -30rpx;
|
||||
width: 300rpx;
|
||||
height: 200rpx;
|
||||
background: radial-gradient(circle, rgba(197, 237, 255, 0.95) 0%, rgba(197, 237, 255, 0) 72%);
|
||||
}
|
||||
|
||||
.hero-bg-right {
|
||||
top: 46rpx;
|
||||
right: -40rpx;
|
||||
width: 360rpx;
|
||||
height: 260rpx;
|
||||
background: radial-gradient(circle, rgba(184, 231, 255, 0.92) 0%, rgba(184, 231, 255, 0) 72%);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
padding-left: 28rpx;
|
||||
padding-right: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
backdrop-filter: blur(18rpx);
|
||||
-webkit-backdrop-filter: blur(18rpx);
|
||||
box-shadow: 0 10rpx 28rpx rgba(65, 105, 135, 0.08);
|
||||
}
|
||||
|
||||
.navbar-inner {
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.navbar-left {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-back-btn {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 24rpx;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
box-shadow: 0 8rpx 18rpx rgba(115, 164, 196, 0.14);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #101214;
|
||||
letter-spacing: 2rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navbar-spacer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar-right-placeholder {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
flex-shrink: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
112
components/u-input/u-input.vue
Normal file
112
components/u-input/u-input.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<view class="u-input" :style="mergedStyle">
|
||||
<input
|
||||
class="u-input__inner"
|
||||
:type="type"
|
||||
:placeholder="placeholder"
|
||||
:placeholder-style="placeholderStyle"
|
||||
:value="inputValue"
|
||||
:maxlength="maxlength"
|
||||
:disabled="disabled"
|
||||
:confirm-type="confirmType"
|
||||
@input="handleInput"
|
||||
@confirm="handleConfirm"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UInput',
|
||||
props: {
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
placeholderStyle: {
|
||||
type: String,
|
||||
default: 'color: #c0c4cc;'
|
||||
},
|
||||
maxlength: {
|
||||
type: [String, Number],
|
||||
default: 140
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
confirmType: {
|
||||
type: String,
|
||||
default: 'done'
|
||||
},
|
||||
customStyle: {
|
||||
type: [String, Object],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
inputValue() {
|
||||
return this.modelValue !== '' && this.modelValue !== undefined
|
||||
? this.modelValue
|
||||
: this.value
|
||||
},
|
||||
mergedStyle() {
|
||||
if (typeof this.customStyle === 'string') {
|
||||
return this.customStyle
|
||||
}
|
||||
return this.customStyle || {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleInput(event) {
|
||||
const value = event.detail.value
|
||||
this.$emit('update:modelValue', value)
|
||||
this.$emit('input', value)
|
||||
this.$emit('change', value)
|
||||
},
|
||||
handleConfirm(event) {
|
||||
this.$emit('confirm', event)
|
||||
},
|
||||
handleFocus(event) {
|
||||
this.$emit('focus', event)
|
||||
},
|
||||
handleBlur(event) {
|
||||
this.$emit('blur', event)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.u-input__inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: inherit;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user