molong/tuniao-ui
1
0
Fork 0
mirror of https://gitee.com/TSpecific/tuniao-ui.git synced 2026-06-07 03:53:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

更新图标库

Browse Source 
修复已知bug
This commit is contained in:
jaylen
2022-06-06 13:10:28 +08:00
parent 81579ccee5
commit 1e087b5ac3
226 changed files with 51832 additions and 46044 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templatePage/animate/bubble/bubble.vue
+226
View File
@@ -0,0 +1,226 @@
<template>
<view class="template-bubble">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<canvas canvas-id="bubble" id="bubble" class="bubble" :style="{width: `${windowWidth}px`, height: `${windowHeight}px`}"></canvas>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateBubble',
mixins: [template_page_mixin],
data(){
return {
windowHeight: 0,
windowWidth: 0,
actionTimer: null,
animationTimer: null,
queue: {},
ctx: null
}
},
onLoad() {
this.getSystemInfo()
},
onReady() {
this.$nextTick(() => {
this.queue = {}
this.ctx = uni.createCanvasContext("bubble", this)
setTimeout(() => {
this.actionTimer = setInterval(() => {
this.generateBubble()
}, 500)
}, 1000)
})
},
onUnload() {
this.clearActionTimer()
this.clearAnimationTimer()
},
methods: {
// 获取系统信息
getSystemInfo() {
const systemInfo = uni.getSystemInfoSync()
if (!systemInfo) {
setTimeout(() => {
this.getSystemInfo()
}, 50)
return
}
this.windowHeight = systemInfo.safeArea.height
this.windowWidth = systemInfo.safeArea.width
},
// 生成泡泡
generateBubble() {
const image = "https://tnuiimage.tnkjapp.com/bubble/" + this.$t.number.randomInt(1, 33) + ".png"
uni.getImageInfo({
src: image,
success: (res) => {
if (res.errMsg === 'getImageInfo:ok') {
const anmationData = {
id: new Date().getTime(),
timer: 0,
opacity: 0,
pathData: this.generatePathData(),
image: res.path,
factor: {
speed: 0.0006, // 运动速度，值越小越慢
t: 0.1 // 贝塞尔函数系数，当为0，就是从无到有，这时候屏幕高度也要调一下
}
}
if (Object.keys(this.queue).length > 0) {
this.queue[anmationData.id] = anmationData
} else {
this.queue[anmationData.id] = anmationData
this.bubbleAnimate()
}
}
}
})
},
/* 动画相关 */
// 生成运动的路径数据
generatePathData() {
let width = this.windowWidth,
height = this.windowHeight;
const p0 = {
x: 0.72 * width,
y: height
}
const p1 = {
x: this.$t.number.random(0.22 * width, 0.33 * width),
y: this.$t.number.random(0.5 * height, 0.75 * height)
}
const p2 = {
x: this.$t.number.random(0, 0.88 * width),
y: this.$t.number.random(0.25 * height, 0.5 * height)
}
const p3 = {
x: this.$t.number.random(0, 0.88 * width),
y: this.$t.number.random(0, 0.125 * height)
}
return [p0, p1, p2, p3]
},
// 更新运动的路径
updatePath(data, factor) {
const p0 = data[0]
const p1 = data[1]
const p2 = data[2]
const p3 = data[3]
const t = factor.t
/*计算多项式系数 （下同）*/
const cx1 = 3 * (p1.x - p0.x)
const bx1 = 3 * (p2.x - p1.x) - cx1
const ax1 = p3.x - p0.x - cx1 - bx1
const cy1 = 3 * (p1.y - p0.y)
const by1 = 3 * (p2.y - p1.y) - cy1
const ay1 = p3.y - p0.y - cy1 - by1
const x = ax1 * (t * t * t) + bx1 * (t * t) + cx1 * t + p0.x
const y = ay1 * (t * t * t) + by1 * (t * t) + cy1 * t + p0.y
// console.log(p0.y, p1.y, p2.y, p3.y, y);
return {
x,
y
}
},
// 执行泡泡动画
bubbleAnimate() {
let width = this.windowWidth,
height = this.windowHeight;
Object.keys(this.queue).forEach(key => {
const anmationData = this.queue[+key];
const {
x,
y
} = this.updatePath(
anmationData.pathData,
anmationData.factor
)
const speed = anmationData.factor.speed
anmationData.factor.t += speed
var curWidth = 30
curWidth = (height - y) / 1.5
curWidth = Math.min(30, curWidth)
var curAlpha = anmationData.opacity
curAlpha = y / (0.3 * height) //消失的高度适当调一下
curAlpha = Math.min(1, curAlpha)
this.ctx.globalAlpha = curAlpha
this.ctx.drawImage(anmationData.image, x - curWidth / 2, y, curWidth, curWidth)
// this.ctx.setFillStyle('red')
// this.ctx.fillRect(x - curWidth / 2, y, 50, 50)
if (anmationData.factor.t > 1) {
delete this.queue[anmationData.id]
}
if (y > height) {
delete this.queue[anmationData.id]
}
})
this.ctx.draw()
if (Object.keys(this.queue).length > 0) {
this.animationTimer = setTimeout(() => {
this.bubbleAnimate()
}, 5)
} else {
this.clearAnimationTimer()()
this.ctx.draw() // 清空画面
}
},
// 清除定时器
clearActionTimer() {
if (this.actionTimer) {
clearInterval(this.actionTimer)
}
},
clearAnimationTimer() {
if (this.animationTimer) {
clearTimeout(this.animationTimer)
}
}
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-bubble {
position: relative;
background: linear-gradient(-120deg, #9A5CE5, #01BEFF, #00F5D4, #43e97b);
width: 100vw;
height: 100vh;
.bubble {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1024;
pointer-events: none;
}
}
</style>
templatePage/animate/hollow/hollow.vue
+147 -147
View File
@@ -1,147 +1,147 @@
<template>
<view class="template-hollow">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="" :style="{paddingTop: vuex_custom_bar_height + 'px;margin-top:250rpx'}">
<view class="tn-flex tn-flex-row-between tn-margin-xl">
<view class="justify-content-item" style="margin-top: 50rpx;">
<view class="tn-radius tn-margin-bottom-xl">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">Jaylen</view>
</view>
<view class="tn-radius tn-margin-bottom">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">浅浅遇</view>
</view>
</view>
<view class="justify-content-item">
<view class="tn-radius tn-margin-bottom-xl">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">可我会像</view>
</view>
<view class="tn-radius tn-margin-bottom">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">北北同学</view>
</view>
</view>
<view class="justify-content-item" style="margin-top: 50rpx;">
<view class="tn-radius tn-margin-bottom-xl">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">福哥</view>
</view>
<view class="tn-radius tn-margin-bottom">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/content_1.jpeg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">锋哥</view>
</view>
</view>
</view>
</view>
<view class="bottom-backgroup">
<image src='https://tnuiimage.tnkjapp.com/animate/hollow.jpg' mode='widthFix' class='backgroud-image'></image>
</view>
<view class="hollow">
<view class="tn-text-xxl">
<text class="">Hi，图鸟的小伙伴</text>
</view>
<view class="tn-text-xl tn-padding-top">
技术的友情，有你真好
</view>
<view class="tn-text-xl tn-padding-top">
TnUI，感谢一路陪伴与支持
</view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateHollow',
mixins: [template_page_mixin],
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 背景图 start */
.bottom-backgroup {
height: 700rpx;
z-index: -1;
.backgroud-image {
border-radius: 60rpx 60rpx 0 0;
width: 100%;
height: 3373rpx;
// z-index: -1;
}
}
/* 背景图 end */
/* 镂空 start*/
.hollow {
position: fixed;
text-align: center;
width: 87%;
padding: 30rpx;
margin: 0 6.5%;
top: 180rpx;
font-weight: bold;
z-index: 1000;
background: rgba(255, 255, 255, 0.95);
color: #000;
border-radius: 20rpx;
/* overlay; difference;lighten;hue;这些都是参数值，但东东觉得lighten好看点*/
mix-blend-mode: lighten;
}
/* 效果布局 start*/
.image-hollow{
width: 200rpx;
height: 400rpx;
font-size: 40rpx;
font-weight: 300;
position: relative;
}
.image-pic{
height: 100%;
background-size: cover;
background-repeat:no-repeat;
// background-attachment:fixed;
background-position:top;
border-radius: 10rpx;
}
</style>
<template>
<view class="template-hollow">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="" :style="{paddingTop: vuex_custom_bar_height + 'px;margin-top:250rpx'}">
<view class="tn-flex tn-flex-row-between tn-margin-xl">
<view class="justify-content-item" style="margin-top: 50rpx;">
<view class="tn-radius tn-margin-bottom-xl">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">Jaylen</view>
</view>
<view class="tn-radius tn-margin-bottom">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">浅浅遇</view>
</view>
</view>
<view class="justify-content-item">
<view class="tn-radius tn-margin-bottom-xl">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">可我会像</view>
</view>
<view class="tn-radius tn-margin-bottom">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">北北同学</view>
</view>
</view>
<view class="justify-content-item" style="margin-top: 50rpx;">
<view class="tn-radius tn-margin-bottom-xl">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">福哥</view>
</view>
<view class="tn-radius tn-margin-bottom">
<view class="image-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/content_1.jpeg')">
<view class="image-hollow">
</view>
</view>
<view class="tn-text-center tn-text-bold tn-padding-top-xs">锋哥</view>
</view>
</view>
</view>
</view>
<view class="bottom-backgroup">
<image src='https://tnuiimage.tnkjapp.com/animate/hollow.jpg' mode='widthFix' class='backgroud-image'></image>
</view>
<view class="hollow">
<view class="tn-text-xxl">
<text class="">Hi，图鸟的小伙伴</text>
</view>
<view class="tn-text-xl tn-padding-top">
技术的友情，有你真好
</view>
<view class="tn-text-xl tn-padding-top">
TnUI，感谢一路陪伴与支持
</view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateHollow',
mixins: [template_page_mixin],
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 背景图 start */
.bottom-backgroup {
height: 700rpx;
z-index: -1;
.backgroud-image {
border-radius: 60rpx 60rpx 0 0;
width: 100%;
height: 3373rpx;
// z-index: -1;
}
}
/* 背景图 end */
/* 镂空 start*/
.hollow {
position: fixed;
text-align: center;
width: 87%;
padding: 30rpx;
margin: 0 6.5%;
top: 180rpx;
font-weight: bold;
z-index: 1000;
background: rgba(255, 255, 255, 0.95);
color: #000;
border-radius: 20rpx;
/* overlay; difference;lighten;hue;这些都是参数值，但东东觉得lighten好看点*/
mix-blend-mode: lighten;
}
/* 效果布局 start*/
.image-hollow{
width: 200rpx;
height: 400rpx;
font-size: 40rpx;
font-weight: 300;
position: relative;
}
.image-pic{
height: 100%;
background-size: cover;
background-repeat:no-repeat;
// background-attachment:fixed;
background-position:top;
border-radius: 10rpx;
}
</style>
templatePage/animate/loading/loading.vue
+265 -265
View File
@@ -1,265 +1,265 @@
<template>
<view class="template-loading">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<!-- 页面内容 -->
<view class="bg-contaniner">
</view>
<view class="container-content hex-border">
<view class="hexagons">
<view class="hexagon"></view>
<view class="hexagon"></view>
<view class="hexagon"></view>
<view class="hexagon"></view>
<view class="hexagon"></view>
<view class="hexagon"></view>
<view class="hexagon"></view>
</view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateLoading',
mixins: [template_page_mixin],
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 移动背景部分 */
.bg-contaniner {
position: fixed;
top: -0rpx;
left: -300rpx;
--text-color: hsl(0 95% 60%);
--bg-color: hsl(0 0% 100%);
--bg-size: 200px;
height: 100%;
display: grid;
place-items: center;
place-content: center;
/* grid-template-areas: "body"; */
overflow: hidden;
font-family: "Dela Gothic One", sans-serif;
background-color: var(--bg-color);
z-index: -1;
}
.bg-contaniner::before {
--size: 150vmax;
grid-area: body;
content: "";
inline-size: var(--size);
block-size: var(--size);
background-image: url("https://tnuiimage.tnkjapp.com/animate/animate1.jpg");
background-size: var(--bg-size);
background-repeat: repeat;
transform: rotate(45deg);
opacity: 0.25;
animation: bg 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.bg-contaniner::before {
animation-duration: 0s;
}
}
@keyframes bg {
to {
background-position: 0 calc(var(--bg-size) * -1);
}
}
/* 加载部分 */
.components-anloading {
margin: 0;
width: 100%;
height: 100vh;
color: #fff;
/* background: linear-gradient(45deg, #0fd850, #f9f047); */
}
.hex-border {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
width: 170px;
height: 170px;
border: 2px solid rgba(235, 237, 241, 0.8);
border-radius: 100%;
}
.hex-border::before {
content: "";
position: absolute;
width: 174px;
height: 174px;
border: 2px solid #F4B4C4;
border-radius: 100%;
box-sizing: border-box;
clip-path: inset(0px 135px 135px 0px);
-webkit-clip-path: inset(0px 135px 135px 0px);
top: -4px;
left: -4px;
animation: rotateSmall 2s linear infinite;
z-index: 2;
}
.hex-border::after {
content: "";
position: absolute;
width: 174px;
height: 174px;
border: 2px solid #F4B4C4;
border-radius: 100%;
box-sizing: border-box;
top: -4px;
left: -4px;
clip-path: inset(0px 30px 30px 0px);
-webkit-clip-path: inset(0px 30px 30px 0px);
animation: rotateLarge 1.6s linear infinite;
}
.hexagons {
position: relative;
border-radius: 100%;
padding: 5%;
top: 30px;
left: 35px;
}
.hexagon {
position: absolute;
width: 40px;
height: 23px;
background-color: #F4B4C4;
transform: scale(1.02);
transform-origin: center;
}
.hexagon::before {
content: "";
position: absolute;
top: -11.5px;
left: 0;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 11.5px solid #F4B4C4;
}
.hexagon::after {
content: "";
position: absolute;
top: 23px;
left: 0;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 11.5px solid #F4B4C4;
}
.hexagon:nth-child(1) {
animation: animateHex 3s infinite;
}
.hexagon:nth-child(2) {
left: 53px;
animation: animateHex 3s 0.2s infinite;
}
.hexagon:nth-child(3) {
left: -13px;
top: 46px;
animation: animateHex 3s 1s infinite;
}
.hexagon:nth-child(4) {
left: 31px;
top: 46px;
animation: animateHex 3s 1.2s infinite;
}
.hexagon:nth-child(5) {
left: 75px;
top: 46px;
animation: animateHex 3s 0.4s infinite;
}
.hexagon:nth-child(6) {
top: 84px;
animation: animateHex 3s 0.8s infinite;
}
.hexagon:nth-child(7) {
left: 53px;
top: 84px;
animation: animateHex 3s 0.6s infinite;
}
@keyframes rotateSmall {
100% {
transform: rotate(1turn);
}
}
@keyframes rotateLarge {
0% {
clip-path: inset(0px 30px 30px 0px);
-webkit-clip-path: inset(0px 30px 30px 0px);
}
50% {
clip-path: inset(0px 150px 150px 0px);
-webkit-clip-path: inset(0px 150px 150px 0px);
}
100% {
transform: rotate(1turn);
clip-path: inset(0px 30px 30px 0px);
-webkit-clip-path: inset(0px 30px 30px 0px);
}
}
@keyframes animateHex {
0% {
transform: scale(1.02);
}
20%,
50% {
transform: scale(0.6);
opacity: 0;
}
65% {
transform: scale(1.02);
opacity: 1;
}
}
</style>
<template>
<view class="template-loading">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<!-- 页面内容 -->
<view class="bg-contaniner">
</view>
<view class="container-content hex-border">
<view class="hexagons">
<view class="hexagon"></view>
<view class="hexagon"></view>
<view class="hexagon"></view>
<view class="hexagon"></view>
<view class="hexagon"></view>
<view class="hexagon"></view>
<view class="hexagon"></view>
</view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateLoading',
mixins: [template_page_mixin],
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 移动背景部分 */
.bg-contaniner {
position: fixed;
top: -0rpx;
left: -300rpx;
--text-color: hsl(0 95% 60%);
--bg-color: hsl(0 0% 100%);
--bg-size: 200px;
height: 100%;
display: grid;
place-items: center;
place-content: center;
/* grid-template-areas: "body"; */
overflow: hidden;
font-family: "Dela Gothic One", sans-serif;
background-color: var(--bg-color);
z-index: -1;
}
.bg-contaniner::before {
--size: 150vmax;
grid-area: body;
content: "";
inline-size: var(--size);
block-size: var(--size);
background-image: url("https://tnuiimage.tnkjapp.com/animate/animate1.jpg");
background-size: var(--bg-size);
background-repeat: repeat;
transform: rotate(45deg);
opacity: 0.25;
animation: bg 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.bg-contaniner::before {
animation-duration: 0s;
}
}
@keyframes bg {
to {
background-position: 0 calc(var(--bg-size) * -1);
}
}
/* 加载部分 */
.components-anloading {
margin: 0;
width: 100%;
height: 100vh;
color: #fff;
/* background: linear-gradient(45deg, #0fd850, #f9f047); */
}
.hex-border {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
width: 170px;
height: 170px;
border: 2px solid rgba(235, 237, 241, 0.8);
border-radius: 100%;
}
.hex-border::before {
content: "";
position: absolute;
width: 174px;
height: 174px;
border: 2px solid #F4B4C4;
border-radius: 100%;
box-sizing: border-box;
clip-path: inset(0px 135px 135px 0px);
-webkit-clip-path: inset(0px 135px 135px 0px);
top: -4px;
left: -4px;
animation: rotateSmall 2s linear infinite;
z-index: 2;
}
.hex-border::after {
content: "";
position: absolute;
width: 174px;
height: 174px;
border: 2px solid #F4B4C4;
border-radius: 100%;
box-sizing: border-box;
top: -4px;
left: -4px;
clip-path: inset(0px 30px 30px 0px);
-webkit-clip-path: inset(0px 30px 30px 0px);
animation: rotateLarge 1.6s linear infinite;
}
.hexagons {
position: relative;
border-radius: 100%;
padding: 5%;
top: 30px;
left: 35px;
}
.hexagon {
position: absolute;
width: 40px;
height: 23px;
background-color: #F4B4C4;
transform: scale(1.02);
transform-origin: center;
}
.hexagon::before {
content: "";
position: absolute;
top: -11.5px;
left: 0;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 11.5px solid #F4B4C4;
}
.hexagon::after {
content: "";
position: absolute;
top: 23px;
left: 0;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 11.5px solid #F4B4C4;
}
.hexagon:nth-child(1) {
animation: animateHex 3s infinite;
}
.hexagon:nth-child(2) {
left: 53px;
animation: animateHex 3s 0.2s infinite;
}
.hexagon:nth-child(3) {
left: -13px;
top: 46px;
animation: animateHex 3s 1s infinite;
}
.hexagon:nth-child(4) {
left: 31px;
top: 46px;
animation: animateHex 3s 1.2s infinite;
}
.hexagon:nth-child(5) {
left: 75px;
top: 46px;
animation: animateHex 3s 0.4s infinite;
}
.hexagon:nth-child(6) {
top: 84px;
animation: animateHex 3s 0.8s infinite;
}
.hexagon:nth-child(7) {
left: 53px;
top: 84px;
animation: animateHex 3s 0.6s infinite;
}
@keyframes rotateSmall {
100% {
transform: rotate(1turn);
}
}
@keyframes rotateLarge {
0% {
clip-path: inset(0px 30px 30px 0px);
-webkit-clip-path: inset(0px 30px 30px 0px);
}
50% {
clip-path: inset(0px 150px 150px 0px);
-webkit-clip-path: inset(0px 150px 150px 0px);
}
100% {
transform: rotate(1turn);
clip-path: inset(0px 30px 30px 0px);
-webkit-clip-path: inset(0px 30px 30px 0px);
}
}
@keyframes animateHex {
0% {
transform: scale(1.02);
}
20%,
50% {
transform: scale(0.6);
opacity: 0;
}
65% {
transform: scale(1.02);
opacity: 1;
}
}
</style>
templatePage/animate/particle/particle.vue
+149 -149
View File
@@ -1,149 +1,149 @@
<template>
<view class="template-particle">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<canvas canvas-id="star_canvas" class="mycanvas" :style="'width:' + screenWidth + 'px;height:' + screenHeight + 'px;'"></canvas>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
const Point = class {
constructor(x, y) {
this.x = x
this.y = y
this.r = 1 + Math.random() * 2
this.sx = Math.random() * 2 - 1
this.sy = Math.random() * 2 - 1
}
draw(ctx) {
ctx.beginPath()
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
ctx.closePath()
ctx.fillStyle = '#fff'
ctx.fill()
}
move(w, h) {
this.x += this.sx
this.y += this.sy
if (this.x > w || this.x < 0) this.sx = -this.sx
if (this.y > h || this.y < 0) this.sy = -this.sy
}
drawLine(ctx, p) {
const dx = this.x - p.x
const dy = this.y - p.y
const d = Math.sqrt(dx * dx + dy * dy)
if (d < 100) {
var alpha = (100 - d) / 300 * 1
ctx.beginPath()
ctx.moveTo(this.x, this.y)
ctx.lineTo(p.x, p.y)
ctx.closePath()
ctx.strokeStyle = 'rgba(255, 255, 255, ' + alpha + ')'
ctx.strokeWidth = 1
ctx.stroke()
}
}
}
const sysinfo = uni.getSystemInfoSync()
const w = 400
const h = 1000
export default {
name: 'TemplateParticle',
mixins: [template_page_mixin],
data(){
return {
ctx: null,
screenWidth: sysinfo.screenWidth,
screenHeight: sysinfo.screenHeight,
timer: null,
points: []
}
},
onLoad(options) {
this.from = options.from || ''
for (let i = 0; i < 80; i++) {
this.points.push(new Point(Math.random() * w, Math.random() * h))
}
this.ctx = uni.createCanvasContext('star_canvas')
// console.log(points)
this.gameloop() //进行
// this.ctx.setFillStyle('red')
// this.ctx.fillRect(200, 300, 50, 50)
// this.ctx.draw()
},
onUnload() {
clearTimeout(this.timer)
},
methods: {
/**粒子进行*/
gameloop() {
this.timer = setTimeout(this.gameloop, 100);
// console.log('gameloop')
this.paint();
},
/**清空画布*/
paint() {
this.ctx.clearRect(0, 0, w, h)
for (var i = 0; i < this.points.length; i++) {
this.points[i].move(w, h)
this.points[i].draw(this.ctx)
for (var j = i + 1; j < this.points.length; j++) {
this.points[i].drawLine(this.ctx, this.points[j])
}
}
this.ctx.draw();
}
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-particle {
background: -webkit-gradient(linear, left top, right top, from(#892FE8), to(#3D7EFF));
background: linear-gradient(90deg, #892FE8, #3D7EFF);
min-height: 100vh
}
.template-particle:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
-webkit-mask-image: linear-gradient(to bottom, transparent, black);
mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
mask-image: linear-gradient(to bottom, transparent, black);
background: -webkit-gradient(linear, left top, right top, from(#E72F8C), to(#892FE8));
background: linear-gradient(90deg, #E72F8C, #892FE8);
}
.mycanvas {
background-size: cover;
width: 100vw;
height: 100vh;
justify-content: center;
flex-direction: column;
color: #fff;
}
</style>
<template>
<view class="template-particle">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<canvas canvas-id="star_canvas" class="mycanvas" :style="'width:' + screenWidth + 'px;height:' + screenHeight + 'px;'"></canvas>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
const Point = class {
constructor(x, y) {
this.x = x
this.y = y
this.r = 1 + Math.random() * 2
this.sx = Math.random() * 2 - 1
this.sy = Math.random() * 2 - 1
}
draw(ctx) {
ctx.beginPath()
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
ctx.closePath()
ctx.fillStyle = '#fff'
ctx.fill()
}
move(w, h) {
this.x += this.sx
this.y += this.sy
if (this.x > w || this.x < 0) this.sx = -this.sx
if (this.y > h || this.y < 0) this.sy = -this.sy
}
drawLine(ctx, p) {
const dx = this.x - p.x
const dy = this.y - p.y
const d = Math.sqrt(dx * dx + dy * dy)
if (d < 100) {
var alpha = (100 - d) / 300 * 1
ctx.beginPath()
ctx.moveTo(this.x, this.y)
ctx.lineTo(p.x, p.y)
ctx.closePath()
ctx.strokeStyle = 'rgba(255, 255, 255, ' + alpha + ')'
ctx.strokeWidth = 1
ctx.stroke()
}
}
}
const sysinfo = uni.getSystemInfoSync()
const w = 400
const h = 1000
export default {
name: 'TemplateParticle',
mixins: [template_page_mixin],
data(){
return {
ctx: null,
screenWidth: sysinfo.screenWidth,
screenHeight: sysinfo.screenHeight,
timer: null,
points: []
}
},
onLoad(options) {
this.from = options.from || ''
for (let i = 0; i < 80; i++) {
this.points.push(new Point(Math.random() * w, Math.random() * h))
}
this.ctx = uni.createCanvasContext('star_canvas')
// console.log(points)
this.gameloop() //进行
// this.ctx.setFillStyle('red')
// this.ctx.fillRect(200, 300, 50, 50)
// this.ctx.draw()
},
onUnload() {
clearTimeout(this.timer)
},
methods: {
/**粒子进行*/
gameloop() {
this.timer = setTimeout(this.gameloop, 100);
// console.log('gameloop')
this.paint();
},
/**清空画布*/
paint() {
this.ctx.clearRect(0, 0, w, h)
for (var i = 0; i < this.points.length; i++) {
this.points[i].move(w, h)
this.points[i].draw(this.ctx)
for (var j = i + 1; j < this.points.length; j++) {
this.points[i].drawLine(this.ctx, this.points[j])
}
}
this.ctx.draw();
}
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-particle {
background: -webkit-gradient(linear, left top, right top, from(#892FE8), to(#3D7EFF));
background: linear-gradient(90deg, #892FE8, #3D7EFF);
min-height: 100vh
}
.template-particle:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
-webkit-mask-image: linear-gradient(to bottom, transparent, black);
mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
mask-image: linear-gradient(to bottom, transparent, black);
background: -webkit-gradient(linear, left top, right top, from(#E72F8C), to(#892FE8));
background: linear-gradient(90deg, #E72F8C, #892FE8);
}
.mycanvas {
background-size: cover;
width: 100vw;
height: 100vh;
justify-content: center;
flex-direction: column;
color: #fff;
}
</style>
templatePage/animate/photo/photo.vue
+264 -264
View File
@@ -1,264 +1,264 @@
<template>
<view class="template-photo">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<!-- 页面内容 -->
<view class="slideshow">
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/cup1.jpg')"></view>
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg')"></view>
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/card.jpg')"></view>
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/watch1.jpg')"></view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplatePhoto',
mixins: [template_page_mixin],
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-photo {
margin: 0;
width: 100%;
height: 100vh;
color: #fff;
overflow: hidden;
}
/* 相册 start*/
.slideshow {
top: 0;
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.slideshow-image {
position: absolute;
width: 100%;
height: 100%;
background: no-repeat 50% 50%;
background-size: cover;
-webkit-animation-name: kenburns;
animation-name: kenburns;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 16s;
animation-duration: 16s;
opacity: 1;
transform: scale(1.2);
}
.slideshow-image:nth-child(1) {
-webkit-animation-name: kenburns-1;
animation-name: kenburns-1;
z-index: 3;
}
.slideshow-image:nth-child(2) {
-webkit-animation-name: kenburns-2;
animation-name: kenburns-2;
z-index: 2;
}
.slideshow-image:nth-child(3) {
-webkit-animation-name: kenburns-3;
animation-name: kenburns-3;
z-index: 1;
}
.slideshow-image:nth-child(4) {
-webkit-animation-name: kenburns-4;
animation-name: kenburns-4;
z-index: 0;
}
@-webkit-keyframes kenburns-1 {
0% {
opacity: 1;
transform: scale(1.2);
}
1.5625% {
opacity: 1;
}
23.4375% {
opacity: 1;
}
26.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
98.4375% {
opacity: 0;
transform: scale(1.2117647059);
}
100% {
opacity: 1;
}
}
@keyframes kenburns-1 {
0% {
opacity: 1;
transform: scale(1.2);
}
1.5625% {
opacity: 1;
}
23.4375% {
opacity: 1;
}
26.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
98.4375% {
opacity: 0;
transform: scale(1.2117647059);
}
100% {
opacity: 1;
}
}
@-webkit-keyframes kenburns-2 {
23.4375% {
opacity: 1;
transform: scale(1.2);
}
26.5625% {
opacity: 1;
}
48.4375% {
opacity: 1;
}
51.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
}
@keyframes kenburns-2 {
23.4375% {
opacity: 1;
transform: scale(1.2);
}
26.5625% {
opacity: 1;
}
48.4375% {
opacity: 1;
}
51.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
}
@-webkit-keyframes kenburns-3 {
48.4375% {
opacity: 1;
transform: scale(1.2);
}
51.5625% {
opacity: 1;
}
73.4375% {
opacity: 1;
}
76.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
}
@keyframes kenburns-3 {
48.4375% {
opacity: 1;
transform: scale(1.2);
}
51.5625% {
opacity: 1;
}
73.4375% {
opacity: 1;
}
76.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
}
@-webkit-keyframes kenburns-4 {
73.4375% {
opacity: 1;
transform: scale(1.2);
}
76.5625% {
opacity: 1;
}
98.4375% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1);
}
}
@keyframes kenburns-4 {
73.4375% {
opacity: 1;
transform: scale(1.2);
}
76.5625% {
opacity: 1;
}
98.4375% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1);
}
}
/* 相册 end*/
</style>
<template>
<view class="template-photo">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<!-- 页面内容 -->
<view class="slideshow">
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/cup1.jpg')"></view>
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg')"></view>
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/card.jpg')"></view>
<view class="slideshow-image" style="background-image: url('https://tnuiimage.tnkjapp.com/shop/watch1.jpg')"></view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplatePhoto',
mixins: [template_page_mixin],
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-photo {
margin: 0;
width: 100%;
height: 100vh;
color: #fff;
overflow: hidden;
}
/* 相册 start*/
.slideshow {
top: 0;
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.slideshow-image {
position: absolute;
width: 100%;
height: 100%;
background: no-repeat 50% 50%;
background-size: cover;
-webkit-animation-name: kenburns;
animation-name: kenburns;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 16s;
animation-duration: 16s;
opacity: 1;
transform: scale(1.2);
}
.slideshow-image:nth-child(1) {
-webkit-animation-name: kenburns-1;
animation-name: kenburns-1;
z-index: 3;
}
.slideshow-image:nth-child(2) {
-webkit-animation-name: kenburns-2;
animation-name: kenburns-2;
z-index: 2;
}
.slideshow-image:nth-child(3) {
-webkit-animation-name: kenburns-3;
animation-name: kenburns-3;
z-index: 1;
}
.slideshow-image:nth-child(4) {
-webkit-animation-name: kenburns-4;
animation-name: kenburns-4;
z-index: 0;
}
@-webkit-keyframes kenburns-1 {
0% {
opacity: 1;
transform: scale(1.2);
}
1.5625% {
opacity: 1;
}
23.4375% {
opacity: 1;
}
26.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
98.4375% {
opacity: 0;
transform: scale(1.2117647059);
}
100% {
opacity: 1;
}
}
@keyframes kenburns-1 {
0% {
opacity: 1;
transform: scale(1.2);
}
1.5625% {
opacity: 1;
}
23.4375% {
opacity: 1;
}
26.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
98.4375% {
opacity: 0;
transform: scale(1.2117647059);
}
100% {
opacity: 1;
}
}
@-webkit-keyframes kenburns-2 {
23.4375% {
opacity: 1;
transform: scale(1.2);
}
26.5625% {
opacity: 1;
}
48.4375% {
opacity: 1;
}
51.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
}
@keyframes kenburns-2 {
23.4375% {
opacity: 1;
transform: scale(1.2);
}
26.5625% {
opacity: 1;
}
48.4375% {
opacity: 1;
}
51.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
}
@-webkit-keyframes kenburns-3 {
48.4375% {
opacity: 1;
transform: scale(1.2);
}
51.5625% {
opacity: 1;
}
73.4375% {
opacity: 1;
}
76.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
}
@keyframes kenburns-3 {
48.4375% {
opacity: 1;
transform: scale(1.2);
}
51.5625% {
opacity: 1;
}
73.4375% {
opacity: 1;
}
76.5625% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
}
@-webkit-keyframes kenburns-4 {
73.4375% {
opacity: 1;
transform: scale(1.2);
}
76.5625% {
opacity: 1;
}
98.4375% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1);
}
}
@keyframes kenburns-4 {
73.4375% {
opacity: 1;
transform: scale(1.2);
}
76.5625% {
opacity: 1;
}
98.4375% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1);
}
}
/* 相册 end*/
</style>
templatePage/animate/suspended/suspended.vue
+214
View File
@@ -0,0 +1,214 @@
<template>
<view class="template-suspended">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="wechat tnxuanfu" @click="navTuniaoUI">
<view class="bg0 pa">
<view class="bg1">
<image src="https://tnuiimage.tnkjapp.com/my/my7.png" class="button-shop shadow"></image>
</view>
</view>
<view class="hx-box pa">
<view class="pr">
<view class="hx-k1 pa0">
<view class="span"></view>
</view>
<view class="hx-k2 pa0">
<view class="span"></view>
</view>
<view class="hx-k3 pa0">
<view class="span"></view>
</view>
<view class="hx-k4 pa0">
<view class="span"></view>
</view>
<view class="hx-k5 pa0">
<view class="span"></view>
</view>
<view class="hx-k6 pa0">
<view class="span"></view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import NavIndexButton from '@/libs/components/nav-index-button.vue'
export default {
name: 'TemplateSuspended',
mixins: [template_page_mixin],
components: { NavIndexButton },
data(){
return {}
},
methods: {
// 跳转到
navTuniaoUI(e) {
wx.vibrateShort();
uni.navigateTo({
url: '/pages/index/index'
})
},
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-suspended{
background-image: linear-gradient(to top, #4C3FAE 20%, #6E26BA 80%);
width: 100vw;
height: 100vh;
}
/* 悬浮 */
.tnxuanfu{
animation: suspension 3s ease-in-out infinite;
}
@keyframes suspension {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-0.8rem);
}
}
/* 悬浮按钮 */
.button-shop {
width: 90rpx;
height: 90rpx;
display: flex;
flex-direction: row;
position: fixed;
/* bottom:200rpx;
right: 20rpx; */
left: 5rpx;
top: 5rpx;
z-index: 1001;
border-radius: 100px;
opacity: 0.9;
}
/* 按钮 */
.wechat {
bottom: 300rpx;
right: 75rpx;
position: fixed;
z-index: 9999;
}
.pa,
.pa0 {
position: absolute
}
.pa0 {
left: 0;
top: 0
}
.bg0 {
width: 100rpx;
height: 100rpx;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bg1 {
width: 100%;
height: 100%;
}
.hx-box {
top: 50%;
left: 50%;
width: 100rpx;
height: 100rpx;
transform-style: preserve-3d;
transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
}
.hx-box .pr {
width: 100rpx;
height: 100rpx;
transform-style: preserve-3d;
animation: hxz 20s linear infinite;
}
@keyframes hxz {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-360deg);
}
}
.hx-box .pr .pa0 {
width: 100rpx;
height: 100rpx;
/* border: 4px solid #5ec0ff; */
border-radius: 1000px;
}
.hx-box .pr .pa0 .span {
display: block;
width: 100%;
height: 100%;
background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc4.png) no-repeat center center;
background-size: 100% 100%;
animation: hx 4s linear infinite;
}
@keyframes hx {
to {
transform: rotate(360deg);
}
}
.hx-k1 {
transform: rotateX(-60deg) rotateZ(-60deg)
}
.hx-k2 {
transform: rotateX(-30deg) rotateZ(-30deg)
}
.hx-k3 {
transform: rotateX(0deg) rotateZ(0deg)
}
.hx-k4 {
transform: rotateX(30deg) rotateZ(30deg)
}
.hx-k5 {
transform: rotateX(60deg) rotateZ(60deg)
}
.hx-k6 {
transform: rotateX(90deg) rotateZ(90deg)
}
</style>
templatePage/animate/wave/wave.vue
+122
View File
@@ -0,0 +1,122 @@
<template>
<view class="template-wave">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="">
</view>
<view class="tnwave waveAnimation">
<view class="waveWrapperInner bgTop">
<view class="wave waveTop" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
</view>
<view class="waveWrapperInner bgMiddle">
<view class="wave waveMiddle" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
</view>
<view class="waveWrapperInner bgBottom">
<view class="wave waveBottom" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-1.png')"></view>
</view>
</view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import NavIndexButton from '@/libs/components/nav-index-button.vue'
export default {
name: 'TemplateWave',
mixins: [template_page_mixin],
components: { NavIndexButton },
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-wave{
background-image: linear-gradient(to top, #4C3FAE 20%, #6E26BA 80%);
width: 100vw;
height: 100vh;
}
@keyframes move_wave {
0% {
transform: translateX(0) translateZ(0) scaleY(1)
}
50% {
transform: translateX(-25%) translateZ(0) scaleY(1)
}
100% {
transform: translateX(-50%) translateZ(0) scaleY(1)
}
}
.tnwave {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.waveWrapperInner {
position: absolute;
width: 100%;
overflow: hidden;
height: 100%;
}
.wave {
position: absolute;
left: 0;
width: 200%;
height: 100%;
background-repeat: repeat no-repeat;
background-position: 0 bottom;
transform-origin: center bottom;
}
.bgTop {
opacity: 0.4;
}
.waveTop {
background-size: 50% 45px;
}
.waveAnimation .waveTop {
animation: move_wave 4s linear infinite;
}
.bgMiddle {
opacity: 0.6;
}
.waveMiddle {
background-size: 50% 40px;
}
.waveAnimation .waveMiddle {
animation: move_wave 3.5s linear infinite;
}
.bgBottom {
opacity: 0.95;
}
.waveBottom {
background-size: 50% 35px;
}
.waveAnimation .waveBottom {
animation: move_wave 2s linear infinite;
}
</style>
templatePage/article/demo1/demo1.vue
+739
View File
@@ -0,0 +1,739 @@
<template>
<view class="tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar> -->
<tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="none">
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
<!-- 图标logo -->
<view class="custom-nav__back">
<view class="logo-pic tn-shadow-blur"
style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg')">
<view class="logo-image">
<tn-badge backgroundColor="#E72F8C" :dot="true" :radius="16" :absolute="true" :translateCenter="false">
</tn-badge>
</view>
</view>
<!-- <view class="tn-icon-left"></view> -->
</view>
<!-- 搜索框 -->
<!-- <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
<view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left tn-color-gray--dark tn-bg-gray--light">
<view class="custom-nav__search__icon tn-icon-search"></view>
<view class="custom-nav__search__text tn-padding-left-xs">开启美好的一天</view>
</view>
</view> -->
<view class="tn-margin-top tn-margin-left">
<tn-tabs :list="scrollList" :current="current" @change="tabChange" activeColor="#000" bold="true"
:fontSize="36"></tn-tabs>
</view>
</view>
</tn-nav-bar>
<!-- 不建议写时间，因为写了时间，你就要经常更新文章了鸭-->
<view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<block v-for="(item, index) in content" :key="index">
<view class="article-shadow tn-margin">
<view class="tn-flex">
<view class="image-pic tn-margin-sm" :style="'background-image:url(' + item.userAvatar + ')'">
<view class="image-article">
</view>
</view>
<view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
<view class="tn-text-lg tn-text-bold clamp-text-1">
{{ item.title }}
</view>
<view class="tn-padding-top-xs" style="min-height: 100rpx;">
<text class=" tn-text-sm tn-color-gray clamp-text-2">
{{ item.desc }}
</text>
</view>
<view class="tn-flex tn-flex-row-between tn-flex-col-between">
<view v-for="(label_item,label_index) in item.label" :key="label_index"
class="justify-content-item tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
<text class="tn-tag-content__item--prefix">#</text> {{ label_item }}
</view>
<view class="justify-content-item tn-color-gray tn-text-center tn-color-gray--disabled" style="padding-top: 5rpx;">
<text class="tn-icon-footprint tn-padding-right-xs"></text>
<text class="tn-padding-right">{{ item.collectionCount }}</text>
<text class="tn-icon-like-lack tn-padding-right-xs"></text>
<text class="">{{ item.likeCount }}</text>
</view>
</view>
</view>
</view>
</view>
</block>
</view>
<!-- 底部tabbar start-->
<view class="tabbar footerfixed">
<view class="action" @click="">
<view class="bar-icon">
<!-- <view class="tn-icon-home-smile tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-home.png'></image> -->
</view>
<view class="tn-color-gray">首页</view>
</view>
<view class="action" @click="">
<view class="bar-icon">
<!-- <view class="tn-icon-discover tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tnnew.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-flower.png'></image> -->
</view>
<view class="tn-color-black">圈子</view>
</view>
<!-- <view class="action bar-center">
<view class="bar-circle tn-shadow-blur">
<view class="tn-icon-camera-fill tn-color-white">
</view>
</view>
<view class="tn-color-gray">发布</view>
</view> -->
<view class="action bar-center" @click="">
<view class="nav-index-button">
<view class="nav-index-button__content">
<view class="nav-index-button__content--icon tn-flex tn-flex-row-center tn-flex-col-center">
<!-- <view class="tn-icon-logo-tuniao"></view> -->
<view class="bar-circle tn-shadow-blur">
<view class="tn-icon-add tn-color-white"></view>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-tiger.png'></image> -->
</view>
</view>
</view>
<view class="nav-index-button__meteor">
<view class="nav-index-button__meteor__wrapper">
<view v-for="(item,index) in 6" :key="index" class="nav-index-button__meteor__item"
:style="{transform: `rotateX(${-60 + (30 * index)}deg) rotateZ(${-60 + (30 * index)}deg)`}">
<view class="nav-index-button__meteor__item--pic"></view>
</view>
</view>
</view>
</view>
<!-- <view class="tn-color-gray">发布</view> -->
</view>
<view class="action" @click="">
<view class="bar-icon">
<!-- <view class="tn-icon-image-text tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-china.png'></image> -->
</view>
<view class="tn-color-gray">优选</view>
</view>
<view class="action" @click="">
<view class="bar-icon">
<!-- <view class="tn-icon-my tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tn.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-money.png'></image> -->
</view>
<view class="tn-color-gray">我的</view>
</view>
</view>
<view class="tn-padding-xl"></view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import NavIndexButton from '@/libs/components/nav-index-button.vue'
export default {
name: 'TemplateCourse',
mixins: [template_page_mixin],
components: {
NavIndexButton
},
data() {
return {
current: 0,
scrollList: [{
name: '资讯'
},
{
name: '博客'
},
{
name: '学习',
count: ''
}
],
content: [{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'red',
label: ['小程序'],
title: '全新出发，新版本已上线，欢迎三连',
desc: '小程序前端源码，免费开源，欢迎白嫖嗷嗷，可以的话，插件市场三连支持一下',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 567
},
collectionCount: 543,
commentCount: 543,
likeCount: 206
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'cyan',
label: ['模型'],
title: '3D模型了解一下？',
desc: '一个拥有大量3D模型的网站',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 987
},
collectionCount: 567,
commentCount: 69,
likeCount: 65
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'blue',
label: ['UI设计'],
title: '为什么资讯不显示时间',
desc: '你确定你经常更新文章吗？',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 321
},
collectionCount: 654,
commentCount: 232,
likeCount: 543
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'green',
label: ['创意'],
title: '创意一点点',
desc: '创意灵感从这里开始',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 230
},
collectionCount: 987,
commentCount: 236,
likeCount: 342
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'orange',
label: ['UI设计'],
title: '语雀素材地址资源',
desc: '图鸟UI素材免费可商用',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 106
},
collectionCount: 765,
commentCount: 32,
likeCount: 91
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'purplered',
label: ['神器'],
title: '最强的视频转GIF工具',
desc: '神器推荐',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 232
},
collectionCount: 776,
commentCount: 48,
likeCount: 86
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'purple',
label: ['粒子'],
title: '小程序粒子效果',
desc: '酷炫的小程序粒子效果一览',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 456
},
collectionCount: 342,
commentCount: 42,
likeCount: 76
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'brown',
label: ['工具'],
title: '小程序任意页面生成二维码',
desc: '二维码生成器',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 129
},
collectionCount: 265,
commentCount: 22,
likeCount: 62
}
],
}
},
methods: {
// tab选项卡切换
tabChange(index) {
this.current = index
},
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 自定义导航栏内容 start */
.custom-nav {
height: 100%;
&__back {
margin: auto 5rpx;
font-size: 40rpx;
margin-right: 10rpx;
margin-left: 30rpx;
flex-basis: 5%;
}
&__search {
flex-basis: 60%;
width: 100%;
height: 100%;
&__box {
width: 100%;
height: 70%;
padding: 10rpx 0;
margin: 0 30rpx;
border-radius: 60rpx 60rpx 0 60rpx;
font-size: 24rpx;
}
&__icon {
padding-right: 10rpx;
margin-left: 20rpx;
font-size: 30rpx;
}
&__text {
color: #AAAAAA;
}
}
}
.logo-image {
width: 60rpx;
height: 60rpx;
position: relative;
margin-top: -15rpx;
}
.logo-pic {
background-size: cover;
background-repeat: no-repeat;
// background-attachment:fixed;
background-position: top;
border-radius: 50%;
}
/* 自定义导航栏内容 end */
/* 资讯主图 start*/
.image-article {
border-radius: 8rpx;
border: 1rpx solid #F8F7F8;
width: 200rpx;
height: 200rpx;
position: relative;
}
.image-pic {
background-size: cover;
background-repeat: no-repeat;
// background-attachment:fixed;
background-position: top;
border-radius: 10rpx;
}
.article-shadow {
border-radius: 15rpx;
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}
/* 文字截取*/
.clamp-text-1 {
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}
.clamp-text-2 {
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}
/* 标签内容 start*/
.tn-tag-content {
&__item {
display: inline-block;
line-height: 35rpx;
padding: 5rpx 25rpx;
&--prefix {
padding-right: 10rpx;
}
}
}
/* 标签内容 end*/
/* 底部tabbar start*/
.footerfixed {
position: fixed;
width: 100%;
bottom: 0;
z-index: 999;
background-color: #FFFFFF;
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
}
.tabbar {
display: flex;
align-items: center;
min-height: 110rpx;
justify-content: space-between;
padding: 0;
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}
.tabbar .action {
font-size: 22rpx;
position: relative;
flex: 1;
text-align: center;
padding: 0;
display: block;
height: auto;
line-height: 1;
margin: 0;
overflow: initial;
}
.bar-center {
animation: suspension 3s ease-in-out infinite;
}
@keyframes suspension {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-0.8rem);
}
}
.tabbar .action .bar-icon {
width: 100rpx;
position: relative;
display: block;
height: auto;
margin: 0 auto 10rpx;
text-align: center;
font-size: 42rpx;
// line-height: 50rpx;
}
.tabbar .action .bar-icon image {
width: 50rpx;
height: 50rpx;
display: inline-block;
}
.tabbar .action .bar-circle {
position: relative;
display: block;
margin: 0rpx auto 0rpx;
text-align: center;
font-size: 60rpx;
line-height: 100rpx;
background-color: #FBBF18;
width: 100rpx !important;
height: 100rpx !important;
overflow: hidden;
border-radius: 50%;
box-shadow: 0px 10px 30px rgba(70, 23, 129, 0.12),
0px -8px 40px rgba(255, 255, 255, 1),
inset 0px -10px 10px rgba(70, 23, 129, 0.05),
inset 0px 10px 20px rgba(255, 255, 255, 1);
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(251, 191, 24, 0.5);
}
.tabbar .action .bar-circle image {
width: 100rpx;
height: 100rpx;
display: inline-block;
margin: 0rpx auto 0rpx;
}
/* 流星+悬浮 */
.nav-index-button {
animation: suspension 3s ease-in-out infinite;
z-index: 999999;
&__content {
position: absolute;
width: 100rpx;
height: 100rpx;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&--icon {
width: 100rpx;
height: 100rpx;
font-size: 60rpx;
border-radius: 50%;
margin-bottom: 18rpx;
position: relative;
z-index: 1;
transform: scale(0.85);
&::after {
content: " ";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
border-radius: inherit;
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
// background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
}
}
}
&__meteor {
position: absolute;
top: 50%;
left: 50%;
width: 100rpx;
height: 100rpx;
transform-style: preserve-3d;
transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
&__wrapper {
width: 100rpx;
height: 100rpx;
transform-style: preserve-3d;
animation: spin 20s linear infinite;
}
&__item {
position: absolute;
width: 100rpx;
height: 100rpx;
border-radius: 1000rpx;
left: 0;
top: 0;
&--pic {
display: block;
width: 100%;
height: 100%;
background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc1.png) no-repeat center center;
background-size: 100% 100%;
animation: arc 4s linear infinite;
}
}
}
}
@keyframes suspension {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-0.6rem);
}
}
@keyframes spin {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-360deg);
}
}
@keyframes arc {
to {
transform: rotate(360deg);
}
}
</style>
templatePage/article/demo2/demo2.vue
+739
View File
@@ -0,0 +1,739 @@
<template>
<view class="tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar> -->
<tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="none">
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
<!-- 图标logo -->
<view class="custom-nav__back">
<view class="logo-pic tn-shadow-blur"
style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg')">
<view class="logo-image">
<tn-badge backgroundColor="#E72F8C" :dot="true" :radius="16" :absolute="true" :translateCenter="false">
</tn-badge>
</view>
</view>
<!-- <view class="tn-icon-left"></view> -->
</view>
<!-- 搜索框 -->
<!-- <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
<view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left tn-color-gray--dark tn-bg-gray--light">
<view class="custom-nav__search__icon tn-icon-search"></view>
<view class="custom-nav__search__text tn-padding-left-xs">开启美好的一天</view>
</view>
</view> -->
<view class="tn-margin-top tn-margin-left">
<tn-tabs :list="scrollList" :current="current" @change="tabChange" activeColor="#000" bold="true"
:fontSize="36"></tn-tabs>
</view>
</view>
</tn-nav-bar>
<!-- 不建议写时间，因为写了时间，你就要经常更新文章了鸭-->
<view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<block v-for="(item, index) in content" :key="index">
<view class="article-shadow tn-margin">
<view class="tn-flex">
<view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
<view class="tn-text-lg tn-text-bold clamp-text-2 tn-text-justify" style="min-height: 95rpx;">
<view v-for="(label_item,label_index) in item.label" :key="label_index" style="transform: translate(0,-5rpx);"
class="justify-content-item tn-tag-content__item tn-margin-right-xs tn-round tn-text-sm tn-text-bold" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
<text class="tn-tag-content__item--prefix">#</text> {{ label_item }}
</view>
<text class="">{{ item.title }}</text>
</view>
<view class="tn-padding-top-xs">
<text class=" tn-text-sm tn-color-gray clamp-text-1">
{{ item.desc }}
</text>
</view>
<view class="tn-flex tn-flex-row-between tn-flex-col-between">
<view class="justify-content-item tn-color-gray tn-text-center tn-color-gray--disabled" style="padding-top: 15rpx;">
<text class="tn-icon-footprint tn-padding-right-xs"></text>
<text class="tn-padding-right">{{ item.collectionCount }}</text>
<text class="tn-icon-like-lack tn-padding-right-xs"></text>
<text class="">{{ item.likeCount }}</text>
</view>
</view>
</view>
<view class="image-pic tn-margin-sm" :style="'background-image:url(' + item.userAvatar + ')'">
<view class="image-article">
</view>
</view>
</view>
</view>
</block>
</view>
<!-- 底部tabbar start-->
<view class="tabbar footerfixed">
<view class="action" @click="">
<view class="bar-icon">
<!-- <view class="tn-icon-home-smile tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-home.png'></image> -->
</view>
<view class="tn-color-gray">首页</view>
</view>
<view class="action" @click="">
<view class="bar-icon">
<!-- <view class="tn-icon-discover tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tnnew.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-flower.png'></image> -->
</view>
<view class="tn-color-black">圈子</view>
</view>
<!-- <view class="action bar-center">
<view class="bar-circle tn-shadow-blur">
<view class="tn-icon-camera-fill tn-color-white">
</view>
</view>
<view class="tn-color-gray">发布</view>
</view> -->
<view class="action bar-center" @click="">
<view class="nav-index-button">
<view class="nav-index-button__content">
<view class="nav-index-button__content--icon tn-flex tn-flex-row-center tn-flex-col-center">
<!-- <view class="tn-icon-logo-tuniao"></view> -->
<view class="bar-circle tn-shadow-blur">
<view class="tn-icon-add tn-color-white"></view>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-tiger.png'></image> -->
</view>
</view>
</view>
<view class="nav-index-button__meteor">
<view class="nav-index-button__meteor__wrapper">
<view v-for="(item,index) in 6" :key="index" class="nav-index-button__meteor__item"
:style="{transform: `rotateX(${-60 + (30 * index)}deg) rotateZ(${-60 + (30 * index)}deg)`}">
<view class="nav-index-button__meteor__item--pic"></view>
</view>
</view>
</view>
</view>
<!-- <view class="tn-color-gray">发布</view> -->
</view>
<view class="action" @click="">
<view class="bar-icon">
<!-- <view class="tn-icon-image-text tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-china.png'></image> -->
</view>
<view class="tn-color-gray">优选</view>
</view>
<view class="action" @click="">
<view class="bar-icon">
<!-- <view class="tn-icon-my tn-color-gray--dark">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tn.png'></image>
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/bless/bless-money.png'></image> -->
</view>
<view class="tn-color-gray">我的</view>
</view>
</view>
<view class="tn-padding-xl"></view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import NavIndexButton from '@/libs/components/nav-index-button.vue'
export default {
name: 'TemplateCourse',
mixins: [template_page_mixin],
components: {
NavIndexButton
},
data() {
return {
current: 0,
scrollList: [{
name: '资讯'
},
{
name: '博客'
},
{
name: '学习',
count: ''
}
],
content: [{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'red',
label: ['小程序'],
title: '小程序官网源码，免费开源欢迎白嫖嗷嗷',
desc: '2.2.0版本已上线，欢迎三连',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 567
},
collectionCount: 543,
commentCount: 543,
likeCount: 206
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'cyan',
label: ['模型'],
title: '一个拥有大量3D模型的网站',
desc: '3D模型了解一下？',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 987
},
collectionCount: 567,
commentCount: 69,
likeCount: 65
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'blue',
label: ['UI设计'],
title: '为什么资讯不显示时间？',
desc: '你确定你经常更新文章吗？',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 321
},
collectionCount: 654,
commentCount: 232,
likeCount: 543
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'green',
label: ['创意'],
title: '创意一点点',
desc: '创意灵感从这里开始',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 230
},
collectionCount: 987,
commentCount: 236,
likeCount: 342
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'orange',
label: ['UI设计'],
title: '图鸟UI素材免费可商用',
desc: '语雀素材地址资源',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 106
},
collectionCount: 765,
commentCount: 32,
likeCount: 91
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'purplered',
label: ['神器'],
title: '最强的视频转GIF工具',
desc: '神器推荐',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 232
},
collectionCount: 776,
commentCount: 48,
likeCount: 86
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
userName: '可我会像',
date: '2021年12月20日',
color: 'purple',
label: ['粒子'],
title: '酷炫的小程序粒子效果一览',
desc: '小程序粒子效果',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 456
},
collectionCount: 342,
commentCount: 42,
likeCount: 76
},
{
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
userName: '可我会像',
date: '2021年12月20日',
color: 'brown',
label: ['工具'],
title: '小程序任意页面生成二维码',
desc: '二维码生成器',
mainImage: 'https://tnuiimage.tnkjapp.com/shop/card.jpg',
viewUser: {
latestUserAvatar: [{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
},
{
src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
},
],
viewUserCount: 129
},
collectionCount: 265,
commentCount: 22,
likeCount: 62
}
],
}
},
methods: {
// tab选项卡切换
tabChange(index) {
this.current = index
},
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 自定义导航栏内容 start */
.custom-nav {
height: 100%;
&__back {
margin: auto 5rpx;
font-size: 40rpx;
margin-right: 10rpx;
margin-left: 30rpx;
flex-basis: 5%;
}
&__search {
flex-basis: 60%;
width: 100%;
height: 100%;
&__box {
width: 100%;
height: 70%;
padding: 10rpx 0;
margin: 0 30rpx;
border-radius: 60rpx 60rpx 0 60rpx;
font-size: 24rpx;
}
&__icon {
padding-right: 10rpx;
margin-left: 20rpx;
font-size: 30rpx;
}
&__text {
color: #AAAAAA;
}
}
}
.logo-image {
width: 60rpx;
height: 60rpx;
position: relative;
margin-top: -15rpx;
}
.logo-pic {
background-size: cover;
background-repeat: no-repeat;
// background-attachment:fixed;
background-position: top;
border-radius: 50%;
}
/* 自定义导航栏内容 end */
/* 资讯主图 start*/
.image-article {
border-radius: 8rpx;
border: 1rpx solid #F8F7F8;
width: 250rpx;
height: 200rpx;
position: relative;
}
.image-pic {
background-size: cover;
background-repeat: no-repeat;
// background-attachment:fixed;
background-position: top;
border-radius: 10rpx;
}
.article-shadow {
border-radius: 15rpx;
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}
/* 文字截取*/
.clamp-text-1 {
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}
.clamp-text-2 {
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}
/* 标签内容 start*/
.tn-tag-content {
&__item {
display: inline-block;
line-height: 35rpx;
padding: 5rpx 25rpx;
&--prefix {
padding-right: 10rpx;
}
}
}
/* 标签内容 end*/
/* 底部tabbar start*/
.footerfixed {
position: fixed;
width: 100%;
bottom: 0;
z-index: 999;
background-color: #FFFFFF;
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
}
.tabbar {
display: flex;
align-items: center;
min-height: 110rpx;
justify-content: space-between;
padding: 0;
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}
.tabbar .action {
font-size: 22rpx;
position: relative;
flex: 1;
text-align: center;
padding: 0;
display: block;
height: auto;
line-height: 1;
margin: 0;
overflow: initial;
}
.bar-center {
animation: suspension 3s ease-in-out infinite;
}
@keyframes suspension {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-0.8rem);
}
}
.tabbar .action .bar-icon {
width: 100rpx;
position: relative;
display: block;
height: auto;
margin: 0 auto 10rpx;
text-align: center;
font-size: 42rpx;
// line-height: 50rpx;
}
.tabbar .action .bar-icon image {
width: 50rpx;
height: 50rpx;
display: inline-block;
}
.tabbar .action .bar-circle {
position: relative;
display: block;
margin: 0rpx auto 0rpx;
text-align: center;
font-size: 60rpx;
line-height: 100rpx;
background-color: #FBBF18;
width: 100rpx !important;
height: 100rpx !important;
overflow: hidden;
border-radius: 50%;
box-shadow: 0px 10px 30px rgba(70, 23, 129, 0.12),
0px -8px 40px rgba(255, 255, 255, 1),
inset 0px -10px 10px rgba(70, 23, 129, 0.05),
inset 0px 10px 20px rgba(255, 255, 255, 1);
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(251, 191, 24, 0.5);
}
.tabbar .action .bar-circle image {
width: 100rpx;
height: 100rpx;
display: inline-block;
margin: 0rpx auto 0rpx;
}
/* 流星+悬浮 */
.nav-index-button {
animation: suspension 3s ease-in-out infinite;
z-index: 999999;
&__content {
position: absolute;
width: 100rpx;
height: 100rpx;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&--icon {
width: 100rpx;
height: 100rpx;
font-size: 60rpx;
border-radius: 50%;
margin-bottom: 18rpx;
position: relative;
z-index: 1;
transform: scale(0.85);
&::after {
content: " ";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
border-radius: inherit;
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
// background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
}
}
}
&__meteor {
position: absolute;
top: 50%;
left: 50%;
width: 100rpx;
height: 100rpx;
transform-style: preserve-3d;
transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
&__wrapper {
width: 100rpx;
height: 100rpx;
transform-style: preserve-3d;
animation: spin 20s linear infinite;
}
&__item {
position: absolute;
width: 100rpx;
height: 100rpx;
border-radius: 1000rpx;
left: 0;
top: 0;
&--pic {
display: block;
width: 100%;
height: 100%;
background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc1.png) no-repeat center center;
background-size: 100% 100%;
animation: arc 4s linear infinite;
}
}
}
}
@keyframes suspension {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-0.6rem);
}
}
@keyframes spin {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-360deg);
}
}
@keyframes arc {
to {
transform: rotate(360deg);
}
}
</style>
templatePage/health/qrcode/qrcode.vue
+621 -621
View File
File diff suppressed because it is too large Load Diff
templatePage/home/course/course.vue
+732 -732
View File
File diff suppressed because it is too large Load Diff
templatePage/home/design/design.vue
+527 -527
View File
File diff suppressed because it is too large Load Diff
templatePage/home/job/job.vue
+558 -558
View File
File diff suppressed because it is too large Load Diff
templatePage/home/music/music.vue
+704 -704
View File
File diff suppressed because it is too large Load Diff
templatePage/home/screen/screen.vue
+704 -704
View File
File diff suppressed because it is too large Load Diff
templatePage/home/wallpaper/wallpaper.vue
+614 -614
View File
File diff suppressed because it is too large Load Diff
templatePage/life/about/about.vue
+267
View File
@@ -0,0 +1,267 @@
<template>
<view class="template-bubble">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<canvas canvas-id="bubble" id="bubble" class="bubble" :style="{width: `${windowWidth}px`, height: `${windowHeight}px`}"></canvas>
<view class="container about-bg" style="background-image:url('https://tnuiimage.tnkjapp.com/about/about.png')">
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateBubble',
mixins: [template_page_mixin],
data(){
return {
windowHeight: 0,
windowWidth: 0,
actionTimer: null,
animationTimer: null,
queue: {},
ctx: null
}
},
onLoad() {
this.getSystemInfo()
},
onReady() {
this.$nextTick(() => {
this.queue = {}
this.ctx = uni.createCanvasContext("bubble", this)
setTimeout(() => {
this.actionTimer = setInterval(() => {
this.generateBubble()
}, 500)
}, 1000)
})
},
onUnload() {
this.clearActionTimer()
this.clearAnimationTimer()
},
methods: {
// 获取系统信息
getSystemInfo() {
const systemInfo = uni.getSystemInfoSync()
if (!systemInfo) {
setTimeout(() => {
this.getSystemInfo()
}, 50)
return
}
this.windowHeight = systemInfo.safeArea.height
this.windowWidth = systemInfo.safeArea.width
},
// 生成泡泡
generateBubble() {
const image = "https://tnuiimage.tnkjapp.com/bubble/" + this.$t.number.randomInt(1, 33) + ".png"
uni.getImageInfo({
src: image,
success: (res) => {
if (res.errMsg === 'getImageInfo:ok') {
const anmationData = {
id: new Date().getTime(),
timer: 0,
opacity: 0,
pathData: this.generatePathData(),
image: res.path,
factor: {
speed: 0.0006, // 运动速度，值越小越慢
t: 0.1 // 贝塞尔函数系数，当为0，就是从无到有，这时候屏幕高度也要调一下
}
}
if (Object.keys(this.queue).length > 0) {
this.queue[anmationData.id] = anmationData
} else {
this.queue[anmationData.id] = anmationData
this.bubbleAnimate()
}
}
}
})
},
/* 动画相关 */
// 生成运动的路径数据
generatePathData() {
let width = this.windowWidth,
height = this.windowHeight;
const p0 = {
x: 0.72 * width,
y: height
}
const p1 = {
x: this.$t.number.random(0.22 * width, 0.33 * width),
y: this.$t.number.random(0.5 * height, 0.75 * height)
}
const p2 = {
x: this.$t.number.random(0, 0.88 * width),
y: this.$t.number.random(0.25 * height, 0.5 * height)
}
const p3 = {
x: this.$t.number.random(0, 0.88 * width),
y: this.$t.number.random(0, 0.125 * height)
}
return [p0, p1, p2, p3]
},
// 更新运动的路径
updatePath(data, factor) {
const p0 = data[0]
const p1 = data[1]
const p2 = data[2]
const p3 = data[3]
const t = factor.t
/*计算多项式系数 （下同）*/
const cx1 = 3 * (p1.x - p0.x)
const bx1 = 3 * (p2.x - p1.x) - cx1
const ax1 = p3.x - p0.x - cx1 - bx1
const cy1 = 3 * (p1.y - p0.y)
const by1 = 3 * (p2.y - p1.y) - cy1
const ay1 = p3.y - p0.y - cy1 - by1
const x = ax1 * (t * t * t) + bx1 * (t * t) + cx1 * t + p0.x
const y = ay1 * (t * t * t) + by1 * (t * t) + cy1 * t + p0.y
// console.log(p0.y, p1.y, p2.y, p3.y, y);
return {
x,
y
}
},
// 执行泡泡动画
bubbleAnimate() {
let width = this.windowWidth,
height = this.windowHeight;
Object.keys(this.queue).forEach(key => {
const anmationData = this.queue[+key];
const {
x,
y
} = this.updatePath(
anmationData.pathData,
anmationData.factor
)
const speed = anmationData.factor.speed
anmationData.factor.t += speed
var curWidth = 30
curWidth = (height - y) / 1.5
curWidth = Math.min(30, curWidth)
var curAlpha = anmationData.opacity
curAlpha = y / (0.3 * height) //消失的高度适当调一下
curAlpha = Math.min(1, curAlpha)
this.ctx.globalAlpha = curAlpha
this.ctx.drawImage(anmationData.image, x - curWidth / 2, y, curWidth, curWidth)
// this.ctx.setFillStyle('red')
// this.ctx.fillRect(x - curWidth / 2, y, 50, 50)
if (anmationData.factor.t > 1) {
delete this.queue[anmationData.id]
}
if (y > height) {
delete this.queue[anmationData.id]
}
})
this.ctx.draw()
if (Object.keys(this.queue).length > 0) {
this.animationTimer = setTimeout(() => {
this.bubbleAnimate()
}, 5)
} else {
this.clearAnimationTimer()()
this.ctx.draw() // 清空画面
}
},
// 清除定时器
clearActionTimer() {
if (this.actionTimer) {
clearInterval(this.actionTimer)
}
},
clearAnimationTimer() {
if (this.animationTimer) {
clearTimeout(this.animationTimer)
}
}
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-bubble {
margin: 0;
width: 100%;
height: 100vh;
color: #fff;
background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
/* background: linear-gradient(-120deg, #9A5CE5, #01BEFF, #00F5D4, #43e97b); */
/* background: linear-gradient(-120deg,#c471f5, #ec008c, #ff4e50,#f9d423); */
/* background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a); */
background-size: 500% 500%;
animation: gradientBG 15s ease infinite;
position: relative;
.bubble {
position: fixed;
bottom: -10vh;
right: 0;
z-index: 1024;
pointer-events: none;
// background-color: red;
}
}
.about-bg {
background-size: cover;
width: 100vw;
height: 100vh;
justify-content: center;
flex-direction: column;
color: #fff;
}
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.container {
width: 100%;
position: absolute;
text-align: center;
}
</style>
templatePage/life/browser/browser.vue
+37
View File
@@ -0,0 +1,37 @@
<template>
<view class="template-course">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import NavIndexButton from '@/libs/components/nav-index-button.vue'
export default {
name: 'TemplateCourse',
mixins: [template_page_mixin],
components: { NavIndexButton },
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
</style>
templatePage/life/candle/candle.vue
+625 -625
View File
File diff suppressed because it is too large Load Diff
templatePage/life/fullpage/fullpage.vue
+159 -159
View File
@@ -1,159 +1,159 @@
<template>
<view class="template-fullpage">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<swiper class="card-swiper" :circular="true" vertical="true"
:autoplay="true" duration="500" interval="5000" @change="cardSwiper" >
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
<view class="swiper-item image-banner">
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'" style="height: 100vh;width: 100vw;"></image>
</view>
<view class="swiper-item-png image-banner">
<image :src="item.pngurl" mode="heightFix" v-if="item.type=='image'" style="height: 100vh;width: 100vw;"></image>
</view>
</swiper-item>
</swiper>
<view class="indication">
<block v-for="(item,index) in swiperList" :key="index">
<view class="spot" :class="cardCur==index?'active':''"></view>
</block>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateFullpage',
mixins: [template_page_mixin],
data(){
return {
cardCur: 0,
swiperList: [{
id: 0,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg1.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full1.png'
}, {
id: 1,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg2.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full2.png'
}, {
id: 2,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg1.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full3.png'
}, {
id: 3,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg2.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full4.png'
}],
}
},
methods: {
// cardSwiper
cardSwiper(e) {
this.cardCur = e.detail.current
},
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 全屏轮播 start*/
.card-swiper {
height: 100vh !important;
}
.card-swiper swiper-item {
width: 750rpx !important;
left: 0rpx;
box-sizing: border-box;
overflow: initial;
}
.card-swiper swiper-item .swiper-item {
width: 100%;
display: block;
height: 100vh;
border-radius: 0rpx;
transform: scale(1);
transition: all 0.2s ease-in 0s;
overflow: hidden;
}
.card-swiper swiper-item.cur .swiper-item {
transform: none;
transition: all 0.2s ease-in 0s;
}
.card-swiper swiper-item .swiper-item-png {
margin-top: -50vh;
width: 100%;
display: block;
border-radius: 0rpx;
transform: translate(1040rpx, 20rpx) scale(0.5, 0.5);
transition: all 0.6s ease 0s;
// overflow: hidden;
}
.card-swiper swiper-item.cur .swiper-item-png {
margin-top: -100vh;
width: 900rpx;
transform: translate(-80rpx, 0rpx) scale(1, 1);
transition: all 0.6s ease 0s;
}
.image-banner{
display: flex;
align-items: center;
justify-content: center;
}
.image-banner image{
width: 100%;
}
/* 轮播指示点 start*/
.indication{
z-index: 9999;
width: 100%;
height: 36rpx;
position: fixed;
// display:flex;
display: block;
flex-direction:row;
align-items:center;
justify-content:center;
}
.spot{
background-color: #000;
opacity: 0.3;
width: 10rpx;
height: 10rpx;
border-radius: 20rpx;
margin: 20rpx 0 !important;
left: 95vw;
top: -60vh;
position: relative;
}
.spot.active{
opacity: 0.6;
height: 30rpx;
background-color: #000;
}
</style>
<template>
<view class="template-fullpage">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<swiper class="card-swiper" :circular="true" vertical="true"
:autoplay="true" duration="500" interval="5000" @change="cardSwiper" >
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
<view class="swiper-item image-banner">
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'" style="height: 100vh;width: 100vw;"></image>
</view>
<view class="swiper-item-png image-banner">
<image :src="item.pngurl" mode="heightFix" v-if="item.type=='image'" style="height: 100vh;width: 100vw;"></image>
</view>
</swiper-item>
</swiper>
<view class="indication">
<block v-for="(item,index) in swiperList" :key="index">
<view class="spot" :class="cardCur==index?'active':''"></view>
</block>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateFullpage',
mixins: [template_page_mixin],
data(){
return {
cardCur: 0,
swiperList: [{
id: 0,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg1.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full1.png'
}, {
id: 1,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg2.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full2.png'
}, {
id: 2,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg1.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full3.png'
}, {
id: 3,
type: 'image',
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg2.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/full4.png'
}],
}
},
methods: {
// cardSwiper
cardSwiper(e) {
this.cardCur = e.detail.current
},
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 全屏轮播 start*/
.card-swiper {
height: 100vh !important;
}
.card-swiper swiper-item {
width: 750rpx !important;
left: 0rpx;
box-sizing: border-box;
overflow: initial;
}
.card-swiper swiper-item .swiper-item {
width: 100%;
display: block;
height: 100vh;
border-radius: 0rpx;
transform: scale(1);
transition: all 0.2s ease-in 0s;
overflow: hidden;
}
.card-swiper swiper-item.cur .swiper-item {
transform: none;
transition: all 0.2s ease-in 0s;
}
.card-swiper swiper-item .swiper-item-png {
margin-top: -50vh;
width: 100%;
display: block;
border-radius: 0rpx;
transform: translate(1040rpx, 20rpx) scale(0.5, 0.5);
transition: all 0.6s ease 0s;
// overflow: hidden;
}
.card-swiper swiper-item.cur .swiper-item-png {
margin-top: -100vh;
width: 900rpx;
transform: translate(-80rpx, 0rpx) scale(1, 1);
transition: all 0.6s ease 0s;
}
.image-banner{
display: flex;
align-items: center;
justify-content: center;
}
.image-banner image{
width: 100%;
}
/* 轮播指示点 start*/
.indication{
z-index: 9999;
width: 100%;
height: 36rpx;
position: fixed;
// display:flex;
display: block;
flex-direction:row;
align-items:center;
justify-content:center;
}
.spot{
background-color: #000;
opacity: 0.3;
width: 10rpx;
height: 10rpx;
border-radius: 20rpx;
margin: 20rpx 0 !important;
left: 95vw;
top: -60vh;
position: relative;
}
.spot.active{
opacity: 0.6;
height: 30rpx;
background-color: #000;
}
</style>
templatePage/life/outset/outset.vue
+477
View File
@@ -0,0 +1,477 @@
<template>
<view class="template-outset">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar> -->
<!-- 流星-->
<view class="tn-satr">
<view class="sky"></view>
<view class="stars">
<view class="falling-stars">
<view class="star-fall"></view>
<view class="star-fall"></view>
<view class="star-fall"></view>
<view class="star-fall"></view>
</view>
<view class="small-stars">
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
</view>
<view class="medium-stars">
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
<view class="star"></view>
</view>
</view>
</view>
<!-- 头像用户信息 -->
<view class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
<view class="user-info__avatar tn-flex tn-flex-col-center tn-flex-row-center">
<view class="tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/logo/tuniao.png');width: 170rpx;height: 170rpx;background-size: cover;">
</view>
</view>
<!-- <view class="user-info__nick-name">图鸟UI</view> -->
</view>
<view class="tn-text-center tn-color-gray--disabled" style="padding: 60vh 0 0 0;">
<view class="" style="font-size: 45rpx;">
图鸟UI，不止于此
</view>
<view class="tn-color-gray--disabled tn-text-df tn-padding-top">
新触动 新感受 新创意
</view>
</view>
<view class="" style="padding: 120rpx 200rpx;z-index: 999;position: relative;">
<tn-button :plain="true" shape="round" backgroundColor="#FFFFFF" fontColor="#FFFFFF" width="100%" height="70rpx">全新出发</tn-button>
</view>
<view class="tnwave waveAnimation">
<view class="waveWrapperInner bgTop">
<view class="wave waveTop" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
</view>
<view class="waveWrapperInner bgMiddle">
<view class="wave waveMiddle" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
</view>
<view class="waveWrapperInner bgBottom">
<view class="wave waveBottom" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-1.png')"></view>
</view>
</view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import NavIndexButton from '@/libs/components/nav-index-button.vue'
export default {
name: 'TemplateWave',
mixins: [template_page_mixin],
components: { NavIndexButton },
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 用户信息 start */
.user-info {
&__container {
position: absolute;
top: 25vh;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
&__avatar {
width: 200rpx;
height: 200rpx;
border: 8rpx solid rgba(255,255,255,0.05);
border-radius: 50%;
overflow: hidden;
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
}
&__nick-name {
color: #FFFFFF;
margin-top: 26rpx;
font-size: 36rpx;
font-weight: 600;
text-align: center;
}
}
/* 用户信息 end */
/* 流星*/
.tn-satr {
position: fixed;
width: 100%;
height: 600px;
overflow: hidden;
flex-shrink: 0;
z-index: 998;
}
.stars {
position: absolute;
z-index: 1;
width: 100%;
height: 400px;
}
.star {
border-radius: 50%;
background: #ffffff;
box-shadow: 0px 0px 6px 0px rgba(255, 255, 255, 0.8);
}
.small-stars .star {
position: absolute;
width: 3px;
height: 3px;
}
.small-stars .star:nth-child(2n) {
opacity: 0;
-webkit-animation: star-blink 1.2s linear infinite alternate;
animation: star-blink 1.2s linear infinite alternate;
}
.small-stars .star:nth-child(1) {
left: 40px;
bottom: 50px;
}
.small-stars .star:nth-child(2) {
left: 200px;
bottom: 40px;
}
.small-stars .star:nth-child(3) {
left: 60px;
bottom: 120px;
}
.small-stars .star:nth-child(4) {
left: 140px;
bottom: 250px;
}
.small-stars .star:nth-child(5) {
left: 400px;
bottom: 300px;
}
.small-stars .star:nth-child(6) {
left: 170px;
bottom: 80px;
}
.small-stars .star:nth-child(7) {
left: 200px;
bottom: 360px;
-webkit-animation-delay: .2s;
animation-delay: .2s;
}
.small-stars .star:nth-child(8) {
left: 250px;
bottom: 320px;
}
.small-stars .star:nth-child(9) {
left: 300px;
bottom: 340px;
}
.small-stars .star:nth-child(10) {
left: 130px;
bottom: 320px;
-webkit-animation-delay: .5s;
animation-delay: .5s;
}
.small-stars .star:nth-child(11) {
left: 230px;
bottom: 330px;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
.small-stars .star:nth-child(12) {
left: 300px;
bottom: 360px;
-webkit-animation-delay: .3s;
animation-delay: .3s;
}
@-webkit-keyframes star-blink {
50% {
width: 3px;
height: 3px;
opacity: 1;
}
}
@keyframes star-blink {
50% {
width: 3px;
height: 3px;
opacity: 1;
}
}
.medium-stars .star {
position: absolute;
width: 3px;
height: 3px;
opacity: 0;
-webkit-animation: star-blink 1.2s ease-in infinite alternate;
animation: star-blink 1.2s ease-in infinite alternate;
}
.medium-stars .star:nth-child(1) {
left: 300px;
bottom: 50px;
}
.medium-stars .star:nth-child(2) {
left: 400px;
bottom: 40px;
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.medium-stars .star:nth-child(3) {
left: 330px;
bottom: 300px;
-webkit-animation-delay: .2s;
animation-delay: .2s;
}
.medium-stars .star:nth-child(4) {
left: 460px;
bottom: 300px;
-webkit-animation-delay: .9s;
animation-delay: .9s;
}
.medium-stars .star:nth-child(5) {
left: 300px;
bottom: 150px;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.medium-stars .star:nth-child(6) {
left: 440px;
bottom: 120px;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.medium-stars .star:nth-child(7) {
left: 200px;
bottom: 140px;
-webkit-animation-delay: .8s;
animation-delay: .8s;
}
.medium-stars .star:nth-child(8) {
left: 30px;
bottom: 480px;
-webkit-animation-delay: .3s;
animation-delay: .3s;
}
.medium-stars .star:nth-child(9) {
left: 460px;
bottom: 400px;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.medium-stars .star:nth-child(10) {
left: 150px;
bottom: 10px;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.medium-stars .star:nth-child(11) {
left: 420px;
bottom: 450px;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.medium-stars .star:nth-child(12) {
left: 340px;
bottom: 180px;
-webkit-animation-delay: 1.1s;
animation-delay: 1.1s;
}
@keyframes star-blink {
50% {
width: 4px;
height: 4px;
opacity: 1;
}
}
.star-fall {
position: relative;
border-radius: 2px;
width: 80px;
height: 2px;
overflow: hidden;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.star-fall:after {
content: "";
position: absolute;
width: 50px;
height: 2px;
background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.4)));
background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.4) 100%);
left: 100%;
-webkit-animation: star-fall 3.6s linear infinite;
animation: star-fall 3.6s linear infinite;
}
.star-fall:nth-child(1) {
left: 80px;
bottom: -100px;
}
.star-fall:nth-child(1):after {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
.star-fall:nth-child(2) {
left: 200px;
bottom: -200px;
}
.star-fall:nth-child(2):after {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.star-fall:nth-child(3) {
left: 430px;
bottom: -50px;
}
.star-fall:nth-child(3):after {
-webkit-animation-delay: 3.6s;
animation-delay: 3.6s;
}
.star-fall:nth-child(4) {
left: 400px;
bottom: 100px;
}
.star-fall:nth-child(4):after {
-webkit-animation-delay: .2s;
animation-delay: .2s;
}
@-webkit-keyframes star-fall {
20% {
left: -100%;
}
100% {
left: -100%;
}
}
@keyframes star-fall {
20% {
left: -100%;
}
100% {
left: -100%;
}
}
/* 波浪*/
.template-outset{
background-image: linear-gradient(to top, #4C3FAE 20%, #6E26BA 80%);
width: 100vw;
height: 100vh;
}
@keyframes move_wave {
0% {
transform: translateX(0) translateZ(0) scaleY(1)
}
50% {
transform: translateX(-25%) translateZ(0) scaleY(1)
}
100% {
transform: translateX(-50%) translateZ(0) scaleY(1)
}
}
.tnwave {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.waveWrapperInner {
position: absolute;
width: 100%;
overflow: hidden;
height: 100%;
}
.wave {
position: absolute;
left: 0;
width: 200%;
height: 100%;
background-repeat: repeat no-repeat;
background-position: 0 bottom;
transform-origin: center bottom;
}
.bgTop {
opacity: 0.4;
}
.waveTop {
background-size: 50% 45px;
}
.waveAnimation .waveTop {
animation: move_wave 4s linear infinite;
}
.bgMiddle {
opacity: 0.6;
}
.waveMiddle {
background-size: 50% 40px;
}
.waveAnimation .waveMiddle {
animation: move_wave 3.5s linear infinite;
}
.bgBottom {
opacity: 0.95;
}
.waveBottom {
background-size: 50% 35px;
}
.waveAnimation .waveBottom {
animation: move_wave 2s linear infinite;
}
</style>
templatePage/life/pano/pano.vue
+2 -1
View File
@@ -1,7 +1,8 @@
<template>
<view class="components-pano">
<!-- <web-view src="https://j4zgq9xbby.720yun.com/t/98vkswdwr8y"></web-view> -->
<!-- <web-view src="https://sketchfab.com/models/1e9cb6b98a5b4bc39f0e48ec0261000d/embed?autostart=1&internal=1&ui_infos=0&ui_snapshots=1&ui_stop=0&ui_watermark=0"></web-view> -->
<web-view src="https://vr.he29.com/v3/tour/index?id=3095"></web-view>
<!-- <web-view src="https://vr.he29.com/v3/tour/index?id=7026"></web-view> -->
</view>
</template>
templatePage/life/plus/plus.vue
+171 -171
View File
@@ -1,171 +1,171 @@
<template>
<view class="template-plus">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="tn-text-center tn-margin tn-text-lg plus-box" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view class="plus-text">
<view class="tn-text-bold">图鸟UI小程序，免费开源可商用</view>
<view class="tn-margin-bottom-xl">（会员有更多福利鸭）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">图鸟UI Plus会员，初步定价</view>
<view class="tn-text-bold">
<text class="tn-text-xl-xxl">399￥</text>
<text class="tn-text-xl" style="">699￥</text>
<!-- 为什么不用text-decoration 因为这里面加了骚操作，不生效，你试试就知道了吖-->
<text class="" style="margin: -10rpx 10rpx 0 -115rpx;">————</text>
<text class="tn-text-xl-xxl"> / </text>
<text class="tn-text-xxl tn-padding-left-sm">终身</text>
</view>
<view class="tn-margin-bottom-xl">（大约等于1个前端页面价格💕）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">不断更新酷炫组件以及页面模板</view>
<view class="tn-margin-bottom-xl">（偶尔恰饭时常更新啦）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">请勿转售，转售是会慢慢追究法律责任的</view>
<view class="tn-margin-bottom-xl">（毕竟开发圈子就那么小）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">图鸟北北，微信号：<text class="tn-text-bold tn-text-xxl" @click="copyWechat">tnkewo</text> </view>
<view class="">（如需入群，可备注：进微信群）</view>
<view class="">（如需合作，可备注：商业合作）</view>
<view class="tn-margin-bottom-xl">（如需会员，可备注：咨询会员）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">入群须知，群内禁止黄赌毒+广告+吵架</view>
<view class="tn-margin-bottom-xl">（可进群与群友合作，拓展人脉）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">会员人数会达到50+叭</view>
<view class="tn-margin-bottom-xl">（希望够垫付服务器+CDN支出）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">也希望大家能喜欢这个项目</view>
<view class="tn-margin-bottom-xl">（不喜勿喷，北北还在努力成长）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">期待你的5星(⭐⭐⭐⭐⭐)好评</view>
<view class="tn-margin-bottom-xl">（尽管图鸟UI不是我最完美的作品）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">使用手册 + 图片素材 + 意见反馈 + Bug提交</view>
<view class="tn-margin-bottom-xl" @click="copyYuque">（https://www.yuque.com/tuniao）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">项目正式开始于2021年10月，12月30开源公测，2022年1月30上线正式版</view>
<view class="tn-margin-bottom-xl">（期间断断续续的在接单恰饭）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">灵感来源于我的上一个原创项目</view>
<view class="tn-margin-bottom-xl">（项目初衷是拓展业务，寻求商务合作）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold tn-text-xxl"> <text class="tn-icon-vip-fill tn-padding-right-xs"></text> 会员特权 <text class="tn-icon-vip-fill tn-padding-left-xs"></text></view>
<view class="">①会员尊享更多酷炫模板，模板持续更新</view>
<view class="">②优先响应会员页面模板需求，icon需求</view>
<view class="">③会员版本更新，在会员群进行代码发送</view>
<view class="tn-margin-bottom-xl">④有什么好的建议，可以提出来，多沟通</view>
</view>
<view class="plus-text">
<view class="tn-text-bold tn-text-xxl"> <text class="tn-icon-moon-fill tn-padding-right-xs"></text> 关于作者 <text class="tn-icon-moon-fill tn-padding-left-xs"></text></view>
<view class="">蔡北北，95年，广州</view>
<view class="">浮夸UI设计</view>
<view class="">菜鸡软件开发</view>
<view class="">祭天产品经理</view>
<view class="">背锅项目经理</view>
<view class="tn-margin-bottom-xl">努力往CTO去发展</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">北北感恩你的支持</view>
<view class="tn-margin-bottom-xl"></view>
</view>
</view>
<view class="tn-padding-bottom"></view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplatePlus',
mixins: [template_page_mixin],
data(){
return {}
},
methods: {
// 复制语雀地址
copyYuque() {
uni.setClipboardData({
data: "https://www.yuque.com/tuniao",
})
},
// 复制微信号
copyWechat() {
uni.setClipboardData({
data: "tnkewo",
})
},
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 内容 开始 */
.plus-box {
counter-reset: index;
padding: 0;
max-width: 100vw;
background-image: linear-gradient(to top, #FFA726 , #2DE8BD);
background-attachment: fixed;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.plus-text {
counter-increment: index;
display: initial;
align-items: center;
padding: 12px 0;
box-sizing: border-box;
}
.plus-text::before {
content: counters(index, ".", decimal-leading-zero);
font-size: 1.5rem;
font-weight: bold;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
align-self: flex-start;
}
</style>
<template>
<view class="template-plus">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="tn-text-center tn-margin tn-text-lg plus-box" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view class="plus-text">
<view class="tn-text-bold">图鸟UI小程序，免费开源可商用</view>
<view class="tn-margin-bottom-xl">（会员有更多福利鸭）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">图鸟UI Plus会员，初步定价</view>
<view class="tn-text-bold">
<text class="tn-text-xl-xxl">699￥</text>
<text class="tn-text-xl" style="">1299￥</text>
<!-- 为什么不用text-decoration 因为这里面加了骚操作，不生效，你试试就知道了吖-->
<text class="" style="margin: -10rpx 10rpx 0 -115rpx;">————</text>
<text class="tn-text-xl-xxl"> / </text>
<text class="tn-text-xxl tn-padding-left-sm">终身</text>
</view>
<view class="tn-margin-bottom-xl">（大约等于2个酷炫前端页面价格💕）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">不断更新酷炫组件以及页面模板</view>
<view class="tn-margin-bottom-xl">（偶尔恰饭时常更新啦）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">请勿转售，转售是会慢慢追究法律责任的</view>
<view class="tn-margin-bottom-xl">（毕竟开发圈子就那么小）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">图鸟北北，微信号：<text class="tn-text-bold tn-text-xxl" @click="copyWechat">tnkewo</text> </view>
<view class="">（如需入群，可备注：进微信群）</view>
<view class="">（如需合作，可备注：商业合作）</view>
<view class="tn-margin-bottom-xl">（如需会员，可备注：咨询会员）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">入群须知，群内禁止黄赌毒+广告+吵架</view>
<view class="tn-margin-bottom-xl">（可进群与群友合作，拓展人脉）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">会员人数会达到50+叭</view>
<view class="tn-margin-bottom-xl">（希望够垫付服务器+CDN支出）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">也希望大家能喜欢这个项目</view>
<view class="tn-margin-bottom-xl">（不喜勿喷，北北还在努力成长）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">期待你的5星(⭐⭐⭐⭐⭐)好评</view>
<view class="tn-margin-bottom-xl">（尽管图鸟UI不是我最完美的作品）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">使用手册 + 图片素材 + 意见反馈 + Bug提交</view>
<view class="tn-margin-bottom-xl" @click="copyYuque">（https://www.yuque.com/tuniao）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">项目正式开始于2021年10月，12月30开源公测，2022年1月30上线正式版</view>
<view class="tn-margin-bottom-xl">（期间断断续续的在接单恰饭）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">灵感来源于我的上一个原创项目</view>
<view class="tn-margin-bottom-xl">（项目初衷是拓展业务，寻求商务合作）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold tn-text-xxl"> <text class="tn-icon-vip-fill tn-padding-right-xs"></text> 会员特权 <text class="tn-icon-vip-fill tn-padding-left-xs"></text></view>
<view class="">①会员尊享更多酷炫模板，模板持续更新</view>
<view class="">②优先响应会员页面模板需求，icon需求</view>
<view class="">③会员版本更新，在会员群进行代码发送</view>
<view class="tn-margin-bottom-xl">④有什么好的建议，可以提出来，多沟通</view>
</view>
<view class="plus-text">
<view class="tn-text-bold tn-text-xxl"> <text class="tn-icon-moon-fill tn-padding-right-xs"></text> 关于作者 <text class="tn-icon-moon-fill tn-padding-left-xs"></text></view>
<view class="">蔡北北，95年，广州</view>
<view class="">浮夸UI设计</view>
<view class="">菜鸡软件开发</view>
<view class="">祭天产品经理</view>
<view class="">背锅项目经理</view>
<view class="tn-margin-bottom-xl">努力往CTO去发展</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">北北感恩你的支持</view>
<view class="tn-margin-bottom-xl"></view>
</view>
</view>
<view class="tn-padding-bottom"></view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplatePlus',
mixins: [template_page_mixin],
data(){
return {}
},
methods: {
// 复制语雀地址
copyYuque() {
uni.setClipboardData({
data: "https://www.yuque.com/tuniao",
})
},
// 复制微信号
copyWechat() {
uni.setClipboardData({
data: "tnkewo",
})
},
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 内容 开始 */
.plus-box {
counter-reset: index;
padding: 0;
max-width: 100vw;
background-image: linear-gradient(to top, #FFA726 , #2DE8BD);
background-attachment: fixed;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.plus-text {
counter-increment: index;
display: initial;
align-items: center;
padding: 12px 0;
box-sizing: border-box;
}
.plus-text::before {
content: counters(index, ".", decimal-leading-zero);
font-size: 1.5rem;
font-weight: bold;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
align-self: flex-start;
}
</style>
templatePage/life/share/share.vue
+53
View File
@@ -0,0 +1,53 @@
<template>
<view class="template-course">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar> -->
<view class="bottom-backgroup">
<image src='https://tnuiimage.tnkjapp.com/animate/activity.jpg' mode='widthFix' class='backgroud-image'></image>
</view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import NavIndexButton from '@/libs/components/nav-index-button.vue'
export default {
name: 'TemplateCourse',
mixins: [template_page_mixin],
components: { NavIndexButton },
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 背景图 start */
.bottom-backgroup {
height: 700rpx;
z-index: -1;
.backgroud-image {
border-radius: 60rpx 60rpx 0 0;
width: 100%;
height: 4100rpx;
// z-index: -1;
}
}
/* 背景图 end */
</style>
templatePage/login/demo1/demo1.vue
+414 -414
View File
@@ -1,414 +1,414 @@
<template>
<view class="template-login">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="login">
<!-- 顶部背景图片-->
<view class="login__bg login__bg--top">
<image class="bg" src="https://tnuiimage.tnkjapp.com/login/1/login_top2.jpg" mode="widthFix"></image>
</view>
<view class="login__bg login__bg--top">
<image class="rocket rocket-sussuspension" src="https://tnuiimage.tnkjapp.com/login/1/login_top3.png" mode="widthFix"></image>
</view>
<view class="login__wrapper">
<!-- 登录/注册切换 -->
<view class="login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
登录
</view>
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
注册
</view>
<!-- 滑块-->
<view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
</view>
<!-- 输入框内容-->
<view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
<!-- 登录 -->
<block v-if="currentModeIndex === 0">
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-phone"></view>
</view>
<view class="login__info__item__input__content">
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入登录手机号码" />
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-lock"></view>
</view>
<view class="login__info__item__input__content">
<input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
</view>
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
</view>
</view>
</block>
<!-- 注册 -->
<block v-if="currentModeIndex === 1">
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-phone"></view>
</view>
<view class="login__info__item__input__content">
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入注册手机号码" />
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-code"></view>
</view>
<view class="login__info__item__input__content login__info__item__input__content--verify-code">
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
</view>
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-lock"></view>
</view>
<view class="login__info__item__input__content">
<input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
</view>
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
</view>
</view>
</block>
<view class="login__info__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover" :hover-stay-time="150">{{ currentModeIndex === 0 ? '登录' : '注册'}}</view>
<view v-if="currentModeIndex === 0" class="login__info__item__tips">忘记密码?</view>
</view>
<!-- 其他登录方式 -->
<view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-green tn-color-white">
<view class="tn-icon-wechat-fill"></view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
<view class="tn-icon-sina"></view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
<view class="tn-icon-qq"></view>
</view>
</view>
</view>
</view>
<!-- 底部背景图片-->
<view class="login__bg login__bg--bottom">
<image src="https://tnuiimage.tnkjapp.com/login/1/login_bottom_bg.jpg" mode="widthFix"></image>
</view>
</view>
<!-- 验证码倒计时 -->
<tn-verification-code
ref="code"
uniqueKey="login-demo-1"
:seconds="60"
@change="codeChange">
</tn-verification-code>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'login-demo-1',
mixins: [template_page_mixin],
data() {
return {
// 当前选中的模式
currentModeIndex: 0,
// 模式选中滑块
modeSliderStyle: {
left: 0
},
// 是否显示密码
showPassword: false,
// 倒计时提示文字
tips: '获取验证码'
}
},
watch: {
currentModeIndex(value) {
const sliderWidth = uni.upx2px(476 / 2)
this.modeSliderStyle.left = `${sliderWidth * value}px`
}
},
methods: {
// 切换模式
modeSwitch(index) {
this.currentModeIndex = index
this.showPassword = false
},
// 获取验证码
getCode() {
if (this.$refs.code.canGetCode) {
this.$t.messageUtils.loading('正在获取验证码')
setTimeout(() => {
this.$t.messageUtils.closeLoading()
this.$t.messageUtils.toast('验证码已经发送')
// 通知组件开始计时
this.$refs.code.start()
}, 2000)
} else {
this.$t.messageUtils.toast(this.$refs.code.secNum + '秒后再重试')
}
},
// 获取验证码倒计时被修改
codeChange(event) {
this.tips = event
}
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 悬浮 */
.rocket-sussuspension{
animation: suspension 3s ease-in-out infinite;
}
@keyframes suspension {
0%, 100% {
transform: translate(0 , 0);
}
50% {
transform: translate(-0.8rem , 1rem);
}
}
.login {
position: relative;
height: 100%;
z-index: 1;
/* 背景图片 start */
&__bg {
z-index: -1;
position: fixed;
&--top {
top: 0;
left: 0;
right: 0;
width: 100%;
.bg {
width: 750rpx;
will-change: transform;
}
.rocket {
margin: 50rpx 28%;
width: 400rpx;
will-change: transform;
}
}
&--bottom {
bottom: -10rpx;
left: 0;
right: 0;
width: 100%;
// height: 144px;
margin-bottom: env(safe-area-inset-bottom);
image {
width: 750rpx;
will-change: transform;
}
}
}
/* 背景图片 end */
/* 内容 start */
&__wrapper {
margin-top: 403rpx;
width: 100%;
}
/* 切换 start */
&__mode {
position: relative;
margin: 0 auto;
width: 476rpx;
height: 77rpx;
background-color: #FFFFFF;
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
border-radius: 39rpx;
&__item {
height: 77rpx;
width: 100%;
line-height: 77rpx;
text-align: center;
font-size: 31rpx;
color: #908f8f;
letter-spacing: 1em;
text-indent: 1em;
z-index: 2;
transition: all 0.4s;
&--active {
font-weight: bold;
color: #FFFFFF;
}
}
&__slider {
position: absolute;
height: inherit;
width: calc(476rpx / 2);
border-radius: inherit;
box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
z-index: 1;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
}
/* 切换 end */
/* 登录注册信息 start */
&__info {
margin: 0 30rpx;
margin-top: 105rpx;
padding: 30rpx 51rpx;
padding-bottom: 0;
border-radius: 20rpx;
background-color: #ffff;
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
&__item {
&__input {
margin-top: 59rpx;
width: 100%;
height: 77rpx;
border: 1rpx solid #E6E6E6;
border-radius: 39rpx;
&__left-icon {
width: 10%;
font-size: 44rpx;
margin-left: 20rpx;
color: #AAAAAA;
}
&__content {
width: 80%;
padding-left: 10rpx;
&--verify-code {
width: 56%;
}
input {
font-size: 24rpx;
// letter-spacing: 0.1em;
}
}
&__right-icon {
width: 10%;
font-size: 44rpx;
margin-right: 20rpx;
color: #AAAAAA;
}
&__right-verify-code {
width: 34%;
margin-right: 20rpx;
}
}
&__button {
margin-top: 75rpx;
margin-bottom: 39rpx;
width: 100%;
height: 77rpx;
text-align: center;
font-size: 31rpx;
font-weight: bold;
line-height: 77rpx;
letter-spacing: 1em;
text-indent: 1em;
border-radius: 39rpx;
box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
}
&__tips {
margin: 30rpx 0;
color: #AAAAAA;
}
}
}
/* 登录注册信息 end */
/* 登录方式切换 start */
&__way {
margin: 0 auto;
margin-top: 110rpx;
&__item {
&--icon {
width: 77rpx;
height: 77rpx;
font-size: 50rpx;
border-radius: 100rpx;
margin-bottom: 18rpx;
position: relative;
z-index: 1;
&::after {
content: " ";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
border-radius: inherit;
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
}
}
}
}
/* 登录方式切换 end */
/* 内容 end */
}
/deep/.input-placeholder {
font-size: 24rpx;
color: #E6E6E6;
}
</style>
<template>
<view class="template-login">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="login">
<!-- 顶部背景图片-->
<view class="login__bg login__bg--top">
<image class="bg" src="https://tnuiimage.tnkjapp.com/login/1/login_top2.jpg" mode="widthFix"></image>
</view>
<view class="login__bg login__bg--top">
<image class="rocket rocket-sussuspension" src="https://tnuiimage.tnkjapp.com/login/1/login_top3.png" mode="widthFix"></image>
</view>
<view class="login__wrapper">
<!-- 登录/注册切换 -->
<view class="login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
登录
</view>
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
注册
</view>
<!-- 滑块-->
<view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
</view>
<!-- 输入框内容-->
<view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
<!-- 登录 -->
<block v-if="currentModeIndex === 0">
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-phone"></view>
</view>
<view class="login__info__item__input__content">
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入登录手机号码" />
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-lock"></view>
</view>
<view class="login__info__item__input__content">
<input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
</view>
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
</view>
</view>
</block>
<!-- 注册 -->
<block v-if="currentModeIndex === 1">
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-phone"></view>
</view>
<view class="login__info__item__input__content">
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入注册手机号码" />
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-code"></view>
</view>
<view class="login__info__item__input__content login__info__item__input__content--verify-code">
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
</view>
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-lock"></view>
</view>
<view class="login__info__item__input__content">
<input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
</view>
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
</view>
</view>
</block>
<view class="login__info__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover" :hover-stay-time="150">{{ currentModeIndex === 0 ? '登录' : '注册'}}</view>
<view v-if="currentModeIndex === 0" class="login__info__item__tips">忘记密码?</view>
</view>
<!-- 其他登录方式 -->
<view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-green tn-color-white">
<view class="tn-icon-wechat-fill"></view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
<view class="tn-icon-sina"></view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
<view class="tn-icon-qq"></view>
</view>
</view>
</view>
</view>
<!-- 底部背景图片-->
<view class="login__bg login__bg--bottom">
<image src="https://tnuiimage.tnkjapp.com/login/1/login_bottom_bg.jpg" mode="widthFix"></image>
</view>
</view>
<!-- 验证码倒计时 -->
<tn-verification-code
ref="code"
uniqueKey="login-demo-1"
:seconds="60"
@change="codeChange">
</tn-verification-code>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'login-demo-1',
mixins: [template_page_mixin],
data() {
return {
// 当前选中的模式
currentModeIndex: 0,
// 模式选中滑块
modeSliderStyle: {
left: 0
},
// 是否显示密码
showPassword: false,
// 倒计时提示文字
tips: '获取验证码'
}
},
watch: {
currentModeIndex(value) {
const sliderWidth = uni.upx2px(476 / 2)
this.modeSliderStyle.left = `${sliderWidth * value}px`
}
},
methods: {
// 切换模式
modeSwitch(index) {
this.currentModeIndex = index
this.showPassword = false
},
// 获取验证码
getCode() {
if (this.$refs.code.canGetCode) {
this.$t.message.loading('正在获取验证码')
setTimeout(() => {
this.$t.message.closeLoading()
this.$t.message.toast('验证码已经发送')
// 通知组件开始计时
this.$refs.code.start()
}, 2000)
} else {
this.$t.message.toast(this.$refs.code.secNum + '秒后再重试')
}
},
// 获取验证码倒计时被修改
codeChange(event) {
this.tips = event
}
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 悬浮 */
.rocket-sussuspension{
animation: suspension 3s ease-in-out infinite;
}
@keyframes suspension {
0%, 100% {
transform: translate(0 , 0);
}
50% {
transform: translate(-0.8rem , 1rem);
}
}
.login {
position: relative;
height: 100%;
z-index: 1;
/* 背景图片 start */
&__bg {
z-index: -1;
position: fixed;
&--top {
top: 0;
left: 0;
right: 0;
width: 100%;
.bg {
width: 750rpx;
will-change: transform;
}
.rocket {
margin: 50rpx 28%;
width: 400rpx;
will-change: transform;
}
}
&--bottom {
bottom: -10rpx;
left: 0;
right: 0;
width: 100%;
// height: 144px;
margin-bottom: env(safe-area-inset-bottom);
image {
width: 750rpx;
will-change: transform;
}
}
}
/* 背景图片 end */
/* 内容 start */
&__wrapper {
margin-top: 403rpx;
width: 100%;
}
/* 切换 start */
&__mode {
position: relative;
margin: 0 auto;
width: 476rpx;
height: 77rpx;
background-color: #FFFFFF;
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
border-radius: 39rpx;
&__item {
height: 77rpx;
width: 100%;
line-height: 77rpx;
text-align: center;
font-size: 31rpx;
color: #908f8f;
letter-spacing: 1em;
text-indent: 1em;
z-index: 2;
transition: all 0.4s;
&--active {
font-weight: bold;
color: #FFFFFF;
}
}
&__slider {
position: absolute;
height: inherit;
width: calc(476rpx / 2);
border-radius: inherit;
box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
z-index: 1;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
}
/* 切换 end */
/* 登录注册信息 start */
&__info {
margin: 0 30rpx;
margin-top: 105rpx;
padding: 30rpx 51rpx;
padding-bottom: 0;
border-radius: 20rpx;
background-color: #ffff;
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
&__item {
&__input {
margin-top: 59rpx;
width: 100%;
height: 77rpx;
border: 1rpx solid #E6E6E6;
border-radius: 39rpx;
&__left-icon {
width: 10%;
font-size: 44rpx;
margin-left: 20rpx;
color: #AAAAAA;
}
&__content {
width: 80%;
padding-left: 10rpx;
&--verify-code {
width: 56%;
}
input {
font-size: 24rpx;
// letter-spacing: 0.1em;
}
}
&__right-icon {
width: 10%;
font-size: 44rpx;
margin-right: 20rpx;
color: #AAAAAA;
}
&__right-verify-code {
width: 34%;
margin-right: 20rpx;
}
}
&__button {
margin-top: 75rpx;
margin-bottom: 39rpx;
width: 100%;
height: 77rpx;
text-align: center;
font-size: 31rpx;
font-weight: bold;
line-height: 77rpx;
letter-spacing: 1em;
text-indent: 1em;
border-radius: 39rpx;
box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
}
&__tips {
margin: 30rpx 0;
color: #AAAAAA;
}
}
}
/* 登录注册信息 end */
/* 登录方式切换 start */
&__way {
margin: 0 auto;
margin-top: 110rpx;
&__item {
&--icon {
width: 77rpx;
height: 77rpx;
font-size: 50rpx;
border-radius: 100rpx;
margin-bottom: 18rpx;
position: relative;
z-index: 1;
&::after {
content: " ";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
border-radius: inherit;
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
}
}
}
}
/* 登录方式切换 end */
/* 内容 end */
}
/deep/.input-placeholder {
font-size: 24rpx;
color: #E6E6E6;
}
</style>
templatePage/login/demo2/demo2.vue
+495 -495
View File
@@ -1,495 +1,495 @@
<template>
<view class="template-login2" >
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<canvas canvas-id="star_canvas" class="mycanvas" :style="'width:' + screenWidth + 'px;height:' + screenHeight + 'px;'"></canvas>
<view class="login">
<!-- 顶部背景图片-->
<!-- <view class="login__bg login__bg--top">
<image class="bg" src="https://tnuiimage.tnkjapp.com/login/1/login_top2.jpg" mode="widthFix"></image>
</view>
<view class="login__bg login__bg--top">
<image class="rocket rocket-sussuspension" src="https://tnuiimage.tnkjapp.com/login/1/login_top3.png" mode="widthFix"></image>
</view> -->
<view class="login__wrapper">
<!-- 登录/注册切换 -->
<view class="login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
登录
</view>
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
注册
</view>
<!-- 滑块-->
<view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
</view>
<!-- 输入框内容-->
<view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
<!-- 登录 -->
<block v-if="currentModeIndex === 0">
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-phone"></view>
</view>
<view class="login__info__item__input__content">
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入登录手机号码" />
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-lock"></view>
</view>
<view class="login__info__item__input__content">
<input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
</view>
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
</view>
</view>
</block>
<!-- 注册 -->
<block v-if="currentModeIndex === 1">
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-phone"></view>
</view>
<view class="login__info__item__input__content">
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入注册手机号码" />
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-code"></view>
</view>
<view class="login__info__item__input__content login__info__item__input__content--verify-code">
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
</view>
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-lock"></view>
</view>
<view class="login__info__item__input__content">
<input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
</view>
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
</view>
</view>
</block>
<view class="login__info__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover" :hover-stay-time="150">{{ currentModeIndex === 0 ? '登录' : '注册'}}</view>
<view v-if="currentModeIndex === 0" class="login__info__item__tips">忘记密码?</view>
</view>
<!-- 其他登录方式 -->
<view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-green tn-color-white">
<view class="tn-icon-wechat-fill"></view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
<view class="tn-icon-sina"></view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
<view class="tn-icon-qq"></view>
</view>
</view>
</view>
</view>
<!-- 底部背景图片-->
<!-- <view class="login__bg login__bg--bottom">
<image src="https://tnuiimage.tnkjapp.com/login/1/login_bottom_bg.jpg" mode="widthFix"></image>
</view> -->
</view>
<!-- 验证码倒计时 -->
<tn-verification-code
ref="code"
uniqueKey="login-demo-2"
:seconds="60"
@change="codeChange">
</tn-verification-code>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
const Point = class {
constructor(x, y) {
this.x = x
this.y = y
this.r = 1 + Math.random() * 2
this.sx = Math.random() * 2 - 1
this.sy = Math.random() * 2 - 1
}
draw(ctx) {
ctx.beginPath()
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
ctx.closePath()
ctx.fillStyle = '#fff'
ctx.fill()
}
move(w, h) {
this.x += this.sx
this.y += this.sy
if (this.x > w || this.x < 0) this.sx = -this.sx
if (this.y > h || this.y < 0) this.sy = -this.sy
}
drawLine(ctx, p) {
const dx = this.x - p.x
const dy = this.y - p.y
const d = Math.sqrt(dx * dx + dy * dy)
if (d < 100) {
var alpha = (100 - d) / 300 * 1
ctx.beginPath()
ctx.moveTo(this.x, this.y)
ctx.lineTo(p.x, p.y)
ctx.closePath()
ctx.strokeStyle = 'rgba(255, 255, 255, ' + alpha + ')'
ctx.strokeWidth = 1
ctx.stroke()
}
}
}
const sysinfo = uni.getSystemInfoSync()
const w = 400
const h = 1000
export default {
name: 'login-demo-2',
mixins: [template_page_mixin],
data() {
return {
ctx: null,
screenWidth: sysinfo.screenWidth,
screenHeight: sysinfo.screenHeight,
timer: null,
points: [],
// 当前选中的模式
currentModeIndex: 0,
// 模式选中滑块
modeSliderStyle: {
left: 0
},
// 是否显示密码
showPassword: false,
// 倒计时提示文字
tips: '获取验证码'
}
},
onLoad(options) {
this.from = options.from || ''
for (let i = 0; i < 80; i++) {
this.points.push(new Point(Math.random() * w, Math.random() * h))
}
this.ctx = uni.createCanvasContext('star_canvas')
// console.log(points)
this.gameloop() //进行
// this.ctx.setFillStyle('red')
// this.ctx.fillRect(200, 300, 50, 50)
// this.ctx.draw()
},
onUnload() {
clearTimeout(this.timer)
},
watch: {
currentModeIndex(value) {
const sliderWidth = uni.upx2px(476 / 2)
this.modeSliderStyle.left = `${sliderWidth * value}px`
}
},
methods: {
/**粒子进行*/
gameloop() {
this.timer = setTimeout(this.gameloop, 100);
// console.log('gameloop')
this.paint();
},
/**清空画布*/
paint() {
this.ctx.clearRect(0, 0, w, h)
for (var i = 0; i < this.points.length; i++) {
this.points[i].move(w, h)
this.points[i].draw(this.ctx)
for (var j = i + 1; j < this.points.length; j++) {
this.points[i].drawLine(this.ctx, this.points[j])
}
}
this.ctx.draw();
},
// 切换模式
modeSwitch(index) {
this.currentModeIndex = index
this.showPassword = false
},
// 获取验证码
getCode() {
if (this.$refs.code.canGetCode) {
this.$t.messageUtils.loading('正在获取验证码')
setTimeout(() => {
this.$t.messageUtils.closeLoading()
this.$t.messageUtils.toast('验证码已经发送')
// 通知组件开始计时
this.$refs.code.start()
}, 2000)
} else {
this.$t.messageUtils.toast(this.$refs.code.secNum + '秒后再重试')
}
},
// 获取验证码倒计时被修改
codeChange(event) {
this.tips = event
}
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 粒子背景 start*/
.template-login2 {
background: linear-gradient(90deg, #892FE8, #3D7EFF);
min-height: 100vh
}
// .template-login2:before {
// content: "";
// position: absolute;
// top: 0;
// left: 0;
// bottom: 0;
// right: 0;
// -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
// -webkit-mask-image: linear-gradient(to bottom, transparent, black);
// mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
// mask-image: linear-gradient(to bottom, transparent, black);
// background: -webkit-gradient(linear, left top, right top, from(#E72F8C), to(#892FE8));
// background: linear-gradient(90deg, #E72F8C, #892FE8);
// }
.mycanvas {
position: absolute;
background-size: cover;
width: 100vw;
height: 100vh;
justify-content: center;
flex-direction: column;
color: #fff;
}
.login {
position: relative;
height: 100%;
z-index: 1;
/* 内容 start */
&__wrapper {
padding-top: 400rpx;
width: 100%;
}
/* 切换 start */
&__mode {
position: relative;
margin: 0 auto;
width: 476rpx;
height: 77rpx;
background-color: rgba(255,255,255,0.2);
backdrop-filter: blur(6rpx);
-webkit-backdrop-filter: blur(6rpx);
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
border-radius: 39rpx;
&__item {
height: 77rpx;
width: 100%;
line-height: 77rpx;
text-align: center;
font-size: 31rpx;
color: #FFFFFF;
letter-spacing: 1em;
text-indent: 1em;
z-index: 2;
transition: all 0.4s;
&--active {
font-weight: bold;
color: #FFFFFF;
}
}
&__slider {
position: absolute;
height: inherit;
width: calc(476rpx / 2);
border-radius: inherit;
box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
z-index: 1;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
}
/* 切换 end */
/* 登录注册信息 start */
&__info {
margin: 0 50rpx;
margin-top: 105rpx;
padding: 30rpx 51rpx;
padding-bottom: 0;
border-radius: 20rpx;
background-color: rgba(255,255,255,0.2);
backdrop-filter: blur(6rpx);
-webkit-backdrop-filter: blur(6rpx);
border: 2rpx solid rgba(255, 255, 255, 0.1);
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
&__item {
&__input {
margin-top: 59rpx;
width: 100%;
height: 77rpx;
border: 1rpx solid #FFFFFF;
border-radius: 39rpx;
&__left-icon {
width: 10%;
font-size: 44rpx;
margin-left: 20rpx;
color: #FFFFFF;
}
&__content {
width: 80%;
padding-left: 10rpx;
&--verify-code {
width: 56%;
}
input {
font-size: 24rpx;
color: #FFFFFF;
// letter-spacing: 0.1em;
}
}
&__right-icon {
width: 10%;
font-size: 44rpx;
margin-right: 20rpx;
color: #FFFFFF;
}
&__right-verify-code {
width: 34%;
margin-right: 20rpx;
}
}
&__button {
margin-top: 75rpx;
margin-bottom: 39rpx;
width: 100%;
height: 77rpx;
text-align: center;
font-size: 31rpx;
font-weight: bold;
line-height: 77rpx;
letter-spacing: 1em;
text-indent: 1em;
border-radius: 100rpx;
color: #FFFFFF;
background-color: rgba(255,255,255,0.2);
// border: 2rpx solid #FFFFFF;
}
&__tips {
margin: 30rpx 0;
color: #FFFFFF;
}
}
}
/* 登录注册信息 end */
/* 登录方式切换 start */
&__way {
margin: 0 auto;
margin-top: 110rpx;
&__item {
&--icon {
width: 77rpx;
height: 77rpx;
font-size: 50rpx;
border-radius: 100rpx;
margin-bottom: 18rpx;
position: relative;
z-index: 1;
&::after {
content: " ";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
border-radius: inherit;
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
}
}
}
}
/* 登录方式切换 end */
/* 内容 end */
}
/deep/.input-placeholder {
font-size: 24rpx;
color: #E6E6E6;
}
</style>
<template>
<view class="template-login2" >
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<canvas canvas-id="star_canvas" class="mycanvas" :style="'width:' + screenWidth + 'px;height:' + screenHeight + 'px;'"></canvas>
<view class="login">
<!-- 顶部背景图片-->
<!-- <view class="login__bg login__bg--top">
<image class="bg" src="https://tnuiimage.tnkjapp.com/login/1/login_top2.jpg" mode="widthFix"></image>
</view>
<view class="login__bg login__bg--top">
<image class="rocket rocket-sussuspension" src="https://tnuiimage.tnkjapp.com/login/1/login_top3.png" mode="widthFix"></image>
</view> -->
<view class="login__wrapper">
<!-- 登录/注册切换 -->
<view class="login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
登录
</view>
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
注册
</view>
<!-- 滑块-->
<view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
</view>
<!-- 输入框内容-->
<view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
<!-- 登录 -->
<block v-if="currentModeIndex === 0">
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-phone"></view>
</view>
<view class="login__info__item__input__content">
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入登录手机号码" />
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-lock"></view>
</view>
<view class="login__info__item__input__content">
<input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
</view>
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
</view>
</view>
</block>
<!-- 注册 -->
<block v-if="currentModeIndex === 1">
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-phone"></view>
</view>
<view class="login__info__item__input__content">
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入注册手机号码" />
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-code"></view>
</view>
<view class="login__info__item__input__content login__info__item__input__content--verify-code">
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
</view>
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-lock"></view>
</view>
<view class="login__info__item__input__content">
<input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
</view>
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
</view>
</view>
</block>
<view class="login__info__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover" :hover-stay-time="150">{{ currentModeIndex === 0 ? '登录' : '注册'}}</view>
<view v-if="currentModeIndex === 0" class="login__info__item__tips">忘记密码?</view>
</view>
<!-- 其他登录方式 -->
<view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-green tn-color-white">
<view class="tn-icon-wechat-fill"></view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
<view class="tn-icon-sina"></view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
<view class="tn-icon-qq"></view>
</view>
</view>
</view>
</view>
<!-- 底部背景图片-->
<!-- <view class="login__bg login__bg--bottom">
<image src="https://tnuiimage.tnkjapp.com/login/1/login_bottom_bg.jpg" mode="widthFix"></image>
</view> -->
</view>
<!-- 验证码倒计时 -->
<tn-verification-code
ref="code"
uniqueKey="login-demo-2"
:seconds="60"
@change="codeChange">
</tn-verification-code>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
const Point = class {
constructor(x, y) {
this.x = x
this.y = y
this.r = 1 + Math.random() * 2
this.sx = Math.random() * 2 - 1
this.sy = Math.random() * 2 - 1
}
draw(ctx) {
ctx.beginPath()
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
ctx.closePath()
ctx.fillStyle = '#fff'
ctx.fill()
}
move(w, h) {
this.x += this.sx
this.y += this.sy
if (this.x > w || this.x < 0) this.sx = -this.sx
if (this.y > h || this.y < 0) this.sy = -this.sy
}
drawLine(ctx, p) {
const dx = this.x - p.x
const dy = this.y - p.y
const d = Math.sqrt(dx * dx + dy * dy)
if (d < 100) {
var alpha = (100 - d) / 300 * 1
ctx.beginPath()
ctx.moveTo(this.x, this.y)
ctx.lineTo(p.x, p.y)
ctx.closePath()
ctx.strokeStyle = 'rgba(255, 255, 255, ' + alpha + ')'
ctx.strokeWidth = 1
ctx.stroke()
}
}
}
const sysinfo = uni.getSystemInfoSync()
const w = 400
const h = 1000
export default {
name: 'login-demo-2',
mixins: [template_page_mixin],
data() {
return {
ctx: null,
screenWidth: sysinfo.screenWidth,
screenHeight: sysinfo.screenHeight,
timer: null,
points: [],
// 当前选中的模式
currentModeIndex: 0,
// 模式选中滑块
modeSliderStyle: {
left: 0
},
// 是否显示密码
showPassword: false,
// 倒计时提示文字
tips: '获取验证码'
}
},
onLoad(options) {
this.from = options.from || ''
for (let i = 0; i < 80; i++) {
this.points.push(new Point(Math.random() * w, Math.random() * h))
}
this.ctx = uni.createCanvasContext('star_canvas')
// console.log(points)
this.gameloop() //进行
// this.ctx.setFillStyle('red')
// this.ctx.fillRect(200, 300, 50, 50)
// this.ctx.draw()
},
onUnload() {
clearTimeout(this.timer)
},
watch: {
currentModeIndex(value) {
const sliderWidth = uni.upx2px(476 / 2)
this.modeSliderStyle.left = `${sliderWidth * value}px`
}
},
methods: {
/**粒子进行*/
gameloop() {
this.timer = setTimeout(this.gameloop, 100);
// console.log('gameloop')
this.paint();
},
/**清空画布*/
paint() {
this.ctx.clearRect(0, 0, w, h)
for (var i = 0; i < this.points.length; i++) {
this.points[i].move(w, h)
this.points[i].draw(this.ctx)
for (var j = i + 1; j < this.points.length; j++) {
this.points[i].drawLine(this.ctx, this.points[j])
}
}
this.ctx.draw();
},
// 切换模式
modeSwitch(index) {
this.currentModeIndex = index
this.showPassword = false
},
// 获取验证码
getCode() {
if (this.$refs.code.canGetCode) {
this.$t.message.loading('正在获取验证码')
setTimeout(() => {
this.$t.message.closeLoading()
this.$t.message.toast('验证码已经发送')
// 通知组件开始计时
this.$refs.code.start()
}, 2000)
} else {
this.$t.message.toast(this.$refs.code.secNum + '秒后再重试')
}
},
// 获取验证码倒计时被修改
codeChange(event) {
this.tips = event
}
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 粒子背景 start*/
.template-login2 {
background: linear-gradient(90deg, #892FE8, #3D7EFF);
min-height: 100vh
}
// .template-login2:before {
// content: "";
// position: absolute;
// top: 0;
// left: 0;
// bottom: 0;
// right: 0;
// -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
// -webkit-mask-image: linear-gradient(to bottom, transparent, black);
// mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
// mask-image: linear-gradient(to bottom, transparent, black);
// background: -webkit-gradient(linear, left top, right top, from(#E72F8C), to(#892FE8));
// background: linear-gradient(90deg, #E72F8C, #892FE8);
// }
.mycanvas {
position: absolute;
background-size: cover;
width: 100vw;
height: 100vh;
justify-content: center;
flex-direction: column;
color: #fff;
}
.login {
position: relative;
height: 100%;
z-index: 1;
/* 内容 start */
&__wrapper {
padding-top: 400rpx;
width: 100%;
}
/* 切换 start */
&__mode {
position: relative;
margin: 0 auto;
width: 476rpx;
height: 77rpx;
background-color: rgba(255,255,255,0.2);
backdrop-filter: blur(6rpx);
-webkit-backdrop-filter: blur(6rpx);
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
border-radius: 39rpx;
&__item {
height: 77rpx;
width: 100%;
line-height: 77rpx;
text-align: center;
font-size: 31rpx;
color: #FFFFFF;
letter-spacing: 1em;
text-indent: 1em;
z-index: 2;
transition: all 0.4s;
&--active {
font-weight: bold;
color: #FFFFFF;
}
}
&__slider {
position: absolute;
height: inherit;
width: calc(476rpx / 2);
border-radius: inherit;
box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
z-index: 1;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
}
/* 切换 end */
/* 登录注册信息 start */
&__info {
margin: 0 50rpx;
margin-top: 105rpx;
padding: 30rpx 51rpx;
padding-bottom: 0;
border-radius: 20rpx;
background-color: rgba(255,255,255,0.2);
backdrop-filter: blur(6rpx);
-webkit-backdrop-filter: blur(6rpx);
border: 2rpx solid rgba(255, 255, 255, 0.1);
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
&__item {
&__input {
margin-top: 59rpx;
width: 100%;
height: 77rpx;
border: 1rpx solid #FFFFFF;
border-radius: 39rpx;
&__left-icon {
width: 10%;
font-size: 44rpx;
margin-left: 20rpx;
color: #FFFFFF;
}
&__content {
width: 80%;
padding-left: 10rpx;
&--verify-code {
width: 56%;
}
input {
font-size: 24rpx;
color: #FFFFFF;
// letter-spacing: 0.1em;
}
}
&__right-icon {
width: 10%;
font-size: 44rpx;
margin-right: 20rpx;
color: #FFFFFF;
}
&__right-verify-code {
width: 34%;
margin-right: 20rpx;
}
}
&__button {
margin-top: 75rpx;
margin-bottom: 39rpx;
width: 100%;
height: 77rpx;
text-align: center;
font-size: 31rpx;
font-weight: bold;
line-height: 77rpx;
letter-spacing: 1em;
text-indent: 1em;
border-radius: 100rpx;
color: #FFFFFF;
background-color: rgba(255,255,255,0.2);
// border: 2rpx solid #FFFFFF;
}
&__tips {
margin: 30rpx 0;
color: #FFFFFF;
}
}
}
/* 登录注册信息 end */
/* 登录方式切换 start */
&__way {
margin: 0 auto;
margin-top: 110rpx;
&__item {
&--icon {
width: 77rpx;
height: 77rpx;
font-size: 50rpx;
border-radius: 100rpx;
margin-bottom: 18rpx;
position: relative;
z-index: 1;
&::after {
content: " ";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
border-radius: inherit;
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
}
}
}
}
/* 登录方式切换 end */
/* 内容 end */
}
/deep/.input-placeholder {
font-size: 24rpx;
color: #E6E6E6;
}
</style>
templatePage/login/demo3/demo3.vue
+401 -401
View File
@@ -1,401 +1,401 @@
<template>
<view class="template-login">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="login">
<!-- 顶部背景图片-->
<view class="login__bg login__bg--top">
<image class="bg" src="https://tnuiimage.tnkjapp.com/swiper/banner-animate2.png" mode="aspectFill"></image>
</view>
<view class="login__wrapper">
<!-- 登录/注册切换 -->
<view class="login-sussuspension login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
登录
</view>
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
注册
</view>
<!-- 滑块-->
<view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
</view>
<!-- 输入框内容-->
<view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
<!-- 登录 -->
<block v-if="currentModeIndex === 0">
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-phone"></view>
</view>
<view class="login__info__item__input__content">
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入登录手机号码" />
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-lock"></view>
</view>
<view class="login__info__item__input__content">
<input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
</view>
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
</view>
</view>
</block>
<!-- 注册 -->
<block v-if="currentModeIndex === 1">
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-phone"></view>
</view>
<view class="login__info__item__input__content">
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入注册手机号码" />
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-code"></view>
</view>
<view class="login__info__item__input__content login__info__item__input__content--verify-code">
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
</view>
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-lock"></view>
</view>
<view class="login__info__item__input__content">
<input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
</view>
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
</view>
</view>
</block>
<view class="login__info__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover" :hover-stay-time="150">{{ currentModeIndex === 0 ? '登录' : '注册'}}</view>
<view v-if="currentModeIndex === 0" class="login__info__item__tips">忘记密码?</view>
</view>
<!-- 其他登录方式 -->
<view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-green tn-color-white">
<view class="tn-icon-wechat-fill"></view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
<view class="tn-icon-sina"></view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
<view class="tn-icon-qq"></view>
</view>
</view>
</view>
</view>
</view>
<!-- 验证码倒计时 -->
<tn-verification-code
ref="code"
uniqueKey="login-demo-3"
:seconds="60"
@change="codeChange">
</tn-verification-code>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'login-demo-3',
mixins: [template_page_mixin],
data() {
return {
// 当前选中的模式
currentModeIndex: 0,
// 模式选中滑块
modeSliderStyle: {
left: 0
},
// 是否显示密码
showPassword: false,
// 倒计时提示文字
tips: '获取验证码'
}
},
watch: {
currentModeIndex(value) {
const sliderWidth = uni.upx2px(476 / 2)
this.modeSliderStyle.left = `${sliderWidth * value}px`
}
},
methods: {
// 切换模式
modeSwitch(index) {
this.currentModeIndex = index
this.showPassword = false
},
// 获取验证码
getCode() {
if (this.$refs.code.canGetCode) {
this.$t.messageUtils.loading('正在获取验证码')
setTimeout(() => {
this.$t.messageUtils.closeLoading()
this.$t.messageUtils.toast('验证码已经发送')
// 通知组件开始计时
this.$refs.code.start()
}, 2000)
} else {
this.$t.messageUtils.toast(this.$refs.code.secNum + '秒后再重试')
}
},
// 获取验证码倒计时被修改
codeChange(event) {
this.tips = event
}
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 悬浮 */
.login-sussuspension{
animation: suspension 3s ease-in-out infinite;
}
@keyframes suspension {
0%, 100% {
transform: translate(0 , 0);
}
50% {
transform: translate(0rem , 1rem);
}
}
.login {
position: relative;
height: 100%;
z-index: 1;
/* 背景图片 start */
&__bg {
z-index: -1;
position: fixed;
&--top {
top: 0;
left: 0;
right: 0;
width: 100%;
.bg {
width: 100vw;
height: 100vh;
will-change: transform;
}
}
/* &--bottom {
bottom: -10rpx;
left: 0;
right: 0;
width: 100%;
margin-bottom: env(safe-area-inset-bottom);
image {
width: 750rpx;
will-change: transform;
}
} */
}
/* 背景图片 end */
/* 内容 start */
&__wrapper {
margin-top: 403rpx;
width: 100%;
}
/* 切换 start */
&__mode {
position: relative;
margin: 0 auto;
width: 476rpx;
height: 77rpx;
background-color: rgba(255,255,255,0.6);
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
border-radius: 39rpx;
&__item {
height: 77rpx;
width: 100%;
line-height: 77rpx;
text-align: center;
font-size: 31rpx;
color: #FFFFFF;
letter-spacing: 1em;
text-indent: 1em;
z-index: 2;
transition: all 0.4s;
&--active {
font-weight: bold;
color: #FFFFFF;
}
}
&__slider {
position: absolute;
height: inherit;
width: calc(476rpx / 2);
border-radius: inherit;
box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
z-index: 1;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
}
/* 切换 end */
/* 登录注册信息 start */
&__info {
margin: 0 30rpx;
margin-top: 105rpx;
padding: 30rpx 51rpx;
padding-bottom: 0;
border-radius: 20rpx;
background-color: rgba(255,255,255,0.3);
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
&__item {
&__input {
margin-top: 59rpx;
width: 100%;
height: 77rpx;
border: 1rpx solid #E6E6E6;
border-radius: 39rpx;
&__left-icon {
width: 10%;
font-size: 44rpx;
margin-left: 20rpx;
color: #FFFFFF;
}
&__content {
width: 80%;
padding-left: 10rpx;
&--verify-code {
width: 56%;
}
input {
font-size: 24rpx;
// letter-spacing: 0.1em;
}
}
&__right-icon {
width: 10%;
font-size: 44rpx;
margin-right: 20rpx;
color: #AAAAAA;
}
&__right-verify-code {
width: 34%;
margin-right: 20rpx;
}
}
&__button {
margin-top: 75rpx;
margin-bottom: 39rpx;
width: 100%;
height: 77rpx;
text-align: center;
font-size: 31rpx;
font-weight: bold;
line-height: 77rpx;
letter-spacing: 1em;
text-indent: 1em;
border-radius: 39rpx;
box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
}
&__tips {
margin: 30rpx 0;
color: #AAAAAA;
}
}
}
/* 登录注册信息 end */
/* 登录方式切换 start */
&__way {
margin: 0 auto;
margin-top: 110rpx;
&__item {
&--icon {
width: 77rpx;
height: 77rpx;
font-size: 50rpx;
border-radius: 100rpx;
margin-bottom: 18rpx;
position: relative;
z-index: 1;
&::after {
content: " ";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
border-radius: inherit;
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
}
}
}
}
/* 登录方式切换 end */
/* 内容 end */
}
/deep/.input-placeholder {
font-size: 24rpx;
color: #E6E6E6;
}
</style>
<template>
<view class="template-login">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="login">
<!-- 顶部背景图片-->
<view class="login__bg login__bg--top">
<image class="bg" src="https://tnuiimage.tnkjapp.com/swiper/banner-animate2.png" mode="aspectFill"></image>
</view>
<view class="login__wrapper">
<!-- 登录/注册切换 -->
<view class="login-sussuspension login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
登录
</view>
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
注册
</view>
<!-- 滑块-->
<view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
</view>
<!-- 输入框内容-->
<view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
<!-- 登录 -->
<block v-if="currentModeIndex === 0">
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-phone"></view>
</view>
<view class="login__info__item__input__content">
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入登录手机号码" />
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-lock"></view>
</view>
<view class="login__info__item__input__content">
<input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
</view>
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
</view>
</view>
</block>
<!-- 注册 -->
<block v-if="currentModeIndex === 1">
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-phone"></view>
</view>
<view class="login__info__item__input__content">
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入注册手机号码" />
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-code"></view>
</view>
<view class="login__info__item__input__content login__info__item__input__content--verify-code">
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
</view>
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-lock"></view>
</view>
<view class="login__info__item__input__content">
<input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
</view>
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
</view>
</view>
</block>
<view class="login__info__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover" :hover-stay-time="150">{{ currentModeIndex === 0 ? '登录' : '注册'}}</view>
<view v-if="currentModeIndex === 0" class="login__info__item__tips">忘记密码?</view>
</view>
<!-- 其他登录方式 -->
<view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-green tn-color-white">
<view class="tn-icon-wechat-fill"></view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
<view class="tn-icon-sina"></view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
<view class="tn-icon-qq"></view>
</view>
</view>
</view>
</view>
</view>
<!-- 验证码倒计时 -->
<tn-verification-code
ref="code"
uniqueKey="login-demo-3"
:seconds="60"
@change="codeChange">
</tn-verification-code>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'login-demo-3',
mixins: [template_page_mixin],
data() {
return {
// 当前选中的模式
currentModeIndex: 0,
// 模式选中滑块
modeSliderStyle: {
left: 0
},
// 是否显示密码
showPassword: false,
// 倒计时提示文字
tips: '获取验证码'
}
},
watch: {
currentModeIndex(value) {
const sliderWidth = uni.upx2px(476 / 2)
this.modeSliderStyle.left = `${sliderWidth * value}px`
}
},
methods: {
// 切换模式
modeSwitch(index) {
this.currentModeIndex = index
this.showPassword = false
},
// 获取验证码
getCode() {
if (this.$refs.code.canGetCode) {
this.$t.message.loading('正在获取验证码')
setTimeout(() => {
this.$t.message.closeLoading()
this.$t.message.toast('验证码已经发送')
// 通知组件开始计时
this.$refs.code.start()
}, 2000)
} else {
this.$t.message.toast(this.$refs.code.secNum + '秒后再重试')
}
},
// 获取验证码倒计时被修改
codeChange(event) {
this.tips = event
}
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 悬浮 */
.login-sussuspension{
animation: suspension 3s ease-in-out infinite;
}
@keyframes suspension {
0%, 100% {
transform: translate(0 , 0);
}
50% {
transform: translate(0rem , 1rem);
}
}
.login {
position: relative;
height: 100%;
z-index: 1;
/* 背景图片 start */
&__bg {
z-index: -1;
position: fixed;
&--top {
top: 0;
left: 0;
right: 0;
width: 100%;
.bg {
width: 100vw;
height: 100vh;
will-change: transform;
}
}
/* &--bottom {
bottom: -10rpx;
left: 0;
right: 0;
width: 100%;
margin-bottom: env(safe-area-inset-bottom);
image {
width: 750rpx;
will-change: transform;
}
} */
}
/* 背景图片 end */
/* 内容 start */
&__wrapper {
margin-top: 403rpx;
width: 100%;
}
/* 切换 start */
&__mode {
position: relative;
margin: 0 auto;
width: 476rpx;
height: 77rpx;
background-color: rgba(255,255,255,0.6);
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
border-radius: 39rpx;
&__item {
height: 77rpx;
width: 100%;
line-height: 77rpx;
text-align: center;
font-size: 31rpx;
color: #FFFFFF;
letter-spacing: 1em;
text-indent: 1em;
z-index: 2;
transition: all 0.4s;
&--active {
font-weight: bold;
color: #FFFFFF;
}
}
&__slider {
position: absolute;
height: inherit;
width: calc(476rpx / 2);
border-radius: inherit;
box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
z-index: 1;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
}
/* 切换 end */
/* 登录注册信息 start */
&__info {
margin: 0 30rpx;
margin-top: 105rpx;
padding: 30rpx 51rpx;
padding-bottom: 0;
border-radius: 20rpx;
background-color: rgba(255,255,255,0.3);
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
&__item {
&__input {
margin-top: 59rpx;
width: 100%;
height: 77rpx;
border: 1rpx solid #E6E6E6;
border-radius: 39rpx;
&__left-icon {
width: 10%;
font-size: 44rpx;
margin-left: 20rpx;
color: #FFFFFF;
}
&__content {
width: 80%;
padding-left: 10rpx;
&--verify-code {
width: 56%;
}
input {
font-size: 24rpx;
// letter-spacing: 0.1em;
}
}
&__right-icon {
width: 10%;
font-size: 44rpx;
margin-right: 20rpx;
color: #AAAAAA;
}
&__right-verify-code {
width: 34%;
margin-right: 20rpx;
}
}
&__button {
margin-top: 75rpx;
margin-bottom: 39rpx;
width: 100%;
height: 77rpx;
text-align: center;
font-size: 31rpx;
font-weight: bold;
line-height: 77rpx;
letter-spacing: 1em;
text-indent: 1em;
border-radius: 39rpx;
box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
}
&__tips {
margin: 30rpx 0;
color: #AAAAAA;
}
}
}
/* 登录注册信息 end */
/* 登录方式切换 start */
&__way {
margin: 0 auto;
margin-top: 110rpx;
&__item {
&--icon {
width: 77rpx;
height: 77rpx;
font-size: 50rpx;
border-radius: 100rpx;
margin-bottom: 18rpx;
position: relative;
z-index: 1;
&::after {
content: " ";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
border-radius: inherit;
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
}
}
}
}
/* 登录方式切换 end */
/* 内容 end */
}
/deep/.input-placeholder {
font-size: 24rpx;
color: #E6E6E6;
}
</style>
templatePage/login/demo4/demo4.vue
+420 -420
View File
@@ -1,420 +1,420 @@
<template>
<view class="template-login">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="login">
<!-- 顶部背景图片-->
<view class="login__bg login__bg--top">
<image class="bg" src="https://tnuiimage.tnkjapp.com/login/2/login-top2.png" mode="widthFix"></image>
</view>
<view class="login__wrapper">
<view class="tn-margin-left tn-margin-right tn-text-bold" style="font-size: 60rpx;">
欢迎回来
</view>
<view class="tn-margin tn-color-gray--disabled tn-text-lg">
你是不是傻，菜的一撇的北北
</view>
<!-- 登录/注册切换 -->
<!-- <view class="login-sussuspension login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
登录
</view>
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
注册
</view>
<view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
</view> -->
<!-- 输入框内容-->
<view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
<!-- 登录 -->
<block v-if="currentModeIndex === 0">
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-phone"></view>
</view>
<view class="login__info__item__input__content">
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入手机号" />
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-safe"></view>
</view>
<view class="login__info__item__input__content login__info__item__input__content--verify-code">
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
</view>
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
</view>
</view>
</block>
<!-- 注册 -->
<block v-if="currentModeIndex === 1">
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-phone"></view>
</view>
<view class="login__info__item__input__content">
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入注册手机号码" />
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-safe"></view>
</view>
<view class="login__info__item__input__content login__info__item__input__content--verify-code">
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
</view>
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
<tn-button size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-lock"></view>
</view>
<view class="login__info__item__input__content">
<input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
</view>
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
</view>
</view>
</block>
<view class="login__info__item__button tn-bg-blue tn-color-white" hover-class="tn-hover" :hover-stay-time="150">{{ currentModeIndex === 0 ? '登录' : '注册'}}</view>
<view v-if="currentModeIndex === 1" :class="[{'login__info__item__tips': currentModeIndex === 0}]">
<view class="tn-flex tn-flex-row-between tn-padding">
<view class="" @tap.stop="modeSwitch(0)">前往登录</view>
</view>
</view>
<view v-if="currentModeIndex === 0" :class="[{'login__info__item__tips': currentModeIndex === 1}]">
<view class="tn-flex tn-flex-row-between tn-padding">
<view class="tn-padding-right" @tap.stop="modeSwitch(1)">账号注册</view>
<view class="tn-padding-left tn-color-gray">忘记密码</view>
</view>
</view>
</view>
<!-- 其他登录方式 -->
<view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-teal--dark">
<view class="tn-icon-wechat-fill"></view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-red">
<view class="tn-icon-sina"></view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-blue">
<view class="tn-icon-qq"></view>
</view>
</view>
</view>
</view>
<!-- 底部背景图片-->
<view class="login__bg login__bg--bottom">
<image src="https://tnuiimage.tnkjapp.com/login/2/login-bottom2.png" mode="widthFix"></image>
</view>
</view>
<!-- 验证码倒计时 -->
<tn-verification-code
ref="code"
uniqueKey="login-demo-4"
:seconds="60"
@change="codeChange">
</tn-verification-code>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'login-demo-4',
mixins: [template_page_mixin],
data() {
return {
// 当前选中的模式
currentModeIndex: 0,
// 模式选中滑块
modeSliderStyle: {
left: 0
},
// 是否显示密码
showPassword: false,
// 倒计时提示文字
tips: '获取验证码'
}
},
watch: {
currentModeIndex(value) {
const sliderWidth = uni.upx2px(476 / 2)
this.modeSliderStyle.left = `${sliderWidth * value}px`
}
},
methods: {
// 切换模式
modeSwitch(index) {
this.currentModeIndex = index
this.showPassword = false
},
// 获取验证码
getCode() {
if (this.$refs.code.canGetCode) {
this.$t.messageUtils.loading('正在获取验证码')
setTimeout(() => {
this.$t.messageUtils.closeLoading()
this.$t.messageUtils.toast('验证码已经发送')
// 通知组件开始计时
this.$refs.code.start()
}, 2000)
} else {
this.$t.messageUtils.toast(this.$refs.code.secNum + '秒后再重试')
}
},
// 获取验证码倒计时被修改
codeChange(event) {
this.tips = event
}
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 悬浮 */
/* .login-sussuspension{
animation: suspension 3s ease-in-out infinite;
}
@keyframes suspension {
0%, 100% {
transform: translate(0 , 0);
}
50% {
transform: translate(0rem , 1rem);
}
} */
.login {
position: relative;
height: 100%;
z-index: 1;
/* 背景图片 start */
&__bg {
z-index: -1;
position: fixed;
&--top {
top: 0;
left: 0;
right: 0;
width: 100%;
.bg {
width: 750rpx;
will-change: transform;
}
}
&--bottom {
bottom: -10rpx;
left: 0;
right: 0;
width: 100%;
// height: 144px;
margin-bottom: env(safe-area-inset-bottom);
image {
width: 750rpx;
will-change: transform;
}
}
}
/* 背景图片 end */
/* 内容 start */
&__wrapper {
margin-top: 300rpx;
width: 100%;
}
/* 切换 start */
&__mode {
position: relative;
margin: 0 auto;
width: 476rpx;
height: 77rpx;
margin-top: 100rpx;
background-color: rgba(255,255,255,0.6);
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
border-radius: 39rpx;
&__item {
height: 77rpx;
width: 100%;
line-height: 77rpx;
text-align: center;
font-size: 31rpx;
color: #080808;
letter-spacing: 1em;
text-indent: 1em;
z-index: 2;
transition: all 0.4s;
&--active {
font-weight: bold;
color: #FFFFFF;
}
}
&__slider {
position: absolute;
height: inherit;
width: calc(476rpx / 2);
border-radius: inherit;
box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
z-index: 1;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
}
/* 切换 end */
/* 登录注册信息 start */
&__info {
margin: 80rpx 30rpx 10rpx 30rpx;
padding-bottom: 0;
border-radius: 20rpx;
&__item {
&__input {
margin-top: 59rpx;
width: 100%;
height: 77rpx;
border: 1rpx solid #E6E6E6;
border-radius: 39rpx;
&__left-icon {
width: 10%;
font-size: 44rpx;
margin-left: 20rpx;
color: #838383;
}
&__content {
width: 80%;
padding-left: 10rpx;
&--verify-code {
width: 56%;
}
input {
font-size: 24rpx;
// letter-spacing: 0.1em;
}
}
&__right-icon {
width: 10%;
font-size: 44rpx;
margin-right: 20rpx;
color: #838383;
}
&__right-verify-code {
width: 34%;
margin-right: 20rpx;
}
}
&__button {
margin-top: 75rpx;
margin-bottom: 39rpx;
width: 100%;
height: 77rpx;
text-align: center;
font-size: 31rpx;
font-weight: bold;
line-height: 77rpx;
letter-spacing: 1em;
text-indent: 1em;
border-radius: 39rpx;
box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
}
&__tips {
margin: 30rpx 0;
color: #AAAAAA;
}
}
}
/* 登录注册信息 end */
/* 登录方式切换 start */
&__way {
margin: 0 auto;
margin-top: 110rpx;
&__item {
&--icon {
width: 85rpx;
height: 85rpx;
font-size: 80rpx;
// border-radius: 100rpx;
margin-bottom: 18rpx;
position: relative;
z-index: 1;
// &::after {
// content: " ";
// position: absolute;
// z-index: -1;
// width: 100%;
// height: 100%;
// left: 0;
// bottom: 0;
// border-radius: inherit;
// opacity: 1;
// transform: scale(1, 1);
// background-size: 100% 100%;
// background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
// }
}
}
}
/* 登录方式切换 end */
/* 内容 end */
}
/deep/.input-placeholder {
font-size: 24rpx;
color: #838383;
}
</style>
<template>
<view class="template-login">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="login">
<!-- 顶部背景图片-->
<view class="login__bg login__bg--top">
<image class="bg" src="https://tnuiimage.tnkjapp.com/login/2/login-top2.png" mode="widthFix"></image>
</view>
<view class="login__wrapper">
<view class="tn-margin-left tn-margin-right tn-text-bold" style="font-size: 60rpx;">
欢迎回来
</view>
<view class="tn-margin tn-color-gray--disabled tn-text-lg">
你是不是傻，菜的一撇的北北
</view>
<!-- 登录/注册切换 -->
<!-- <view class="login-sussuspension login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
登录
</view>
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
注册
</view>
<view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
</view> -->
<!-- 输入框内容-->
<view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
<!-- 登录 -->
<block v-if="currentModeIndex === 0">
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-phone"></view>
</view>
<view class="login__info__item__input__content">
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入手机号" />
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-safe"></view>
</view>
<view class="login__info__item__input__content login__info__item__input__content--verify-code">
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
</view>
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
</view>
</view>
</block>
<!-- 注册 -->
<block v-if="currentModeIndex === 1">
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-phone"></view>
</view>
<view class="login__info__item__input__content">
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入注册手机号码" />
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-safe"></view>
</view>
<view class="login__info__item__input__content login__info__item__input__content--verify-code">
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
</view>
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
<tn-button size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
</view>
</view>
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
<view class="login__info__item__input__left-icon">
<view class="tn-icon-lock"></view>
</view>
<view class="login__info__item__input__content">
<input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
</view>
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
</view>
</view>
</block>
<view class="login__info__item__button tn-bg-blue tn-color-white" hover-class="tn-hover" :hover-stay-time="150">{{ currentModeIndex === 0 ? '登录' : '注册'}}</view>
<view v-if="currentModeIndex === 1" :class="[{'login__info__item__tips': currentModeIndex === 0}]">
<view class="tn-flex tn-flex-row-between tn-padding">
<view class="" @tap.stop="modeSwitch(0)">前往登录</view>
</view>
</view>
<view v-if="currentModeIndex === 0" :class="[{'login__info__item__tips': currentModeIndex === 1}]">
<view class="tn-flex tn-flex-row-between tn-padding">
<view class="tn-padding-right" @tap.stop="modeSwitch(1)">账号注册</view>
<view class="tn-padding-left tn-color-gray">忘记密码</view>
</view>
</view>
</view>
<!-- 其他登录方式 -->
<view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-teal--dark">
<view class="tn-icon-wechat-fill"></view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-red">
<view class="tn-icon-sina"></view>
</view>
</view>
<view class="tn-padding-sm tn-margin-xs">
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-blue">
<view class="tn-icon-qq"></view>
</view>
</view>
</view>
</view>
<!-- 底部背景图片-->
<view class="login__bg login__bg--bottom">
<image src="https://tnuiimage.tnkjapp.com/login/2/login-bottom2.png" mode="widthFix"></image>
</view>
</view>
<!-- 验证码倒计时 -->
<tn-verification-code
ref="code"
uniqueKey="login-demo-4"
:seconds="60"
@change="codeChange">
</tn-verification-code>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'login-demo-4',
mixins: [template_page_mixin],
data() {
return {
// 当前选中的模式
currentModeIndex: 0,
// 模式选中滑块
modeSliderStyle: {
left: 0
},
// 是否显示密码
showPassword: false,
// 倒计时提示文字
tips: '获取验证码'
}
},
watch: {
currentModeIndex(value) {
const sliderWidth = uni.upx2px(476 / 2)
this.modeSliderStyle.left = `${sliderWidth * value}px`
}
},
methods: {
// 切换模式
modeSwitch(index) {
this.currentModeIndex = index
this.showPassword = false
},
// 获取验证码
getCode() {
if (this.$refs.code.canGetCode) {
this.$t.message.loading('正在获取验证码')
setTimeout(() => {
this.$t.message.closeLoading()
this.$t.message.toast('验证码已经发送')
// 通知组件开始计时
this.$refs.code.start()
}, 2000)
} else {
this.$t.message.toast(this.$refs.code.secNum + '秒后再重试')
}
},
// 获取验证码倒计时被修改
codeChange(event) {
this.tips = event
}
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 悬浮 */
/* .login-sussuspension{
animation: suspension 3s ease-in-out infinite;
}
@keyframes suspension {
0%, 100% {
transform: translate(0 , 0);
}
50% {
transform: translate(0rem , 1rem);
}
} */
.login {
position: relative;
height: 100%;
z-index: 1;
/* 背景图片 start */
&__bg {
z-index: -1;
position: fixed;
&--top {
top: 0;
left: 0;
right: 0;
width: 100%;
.bg {
width: 750rpx;
will-change: transform;
}
}
&--bottom {
bottom: -10rpx;
left: 0;
right: 0;
width: 100%;
// height: 144px;
margin-bottom: env(safe-area-inset-bottom);
image {
width: 750rpx;
will-change: transform;
}
}
}
/* 背景图片 end */
/* 内容 start */
&__wrapper {
margin-top: 300rpx;
width: 100%;
}
/* 切换 start */
&__mode {
position: relative;
margin: 0 auto;
width: 476rpx;
height: 77rpx;
margin-top: 100rpx;
background-color: rgba(255,255,255,0.6);
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
border-radius: 39rpx;
&__item {
height: 77rpx;
width: 100%;
line-height: 77rpx;
text-align: center;
font-size: 31rpx;
color: #080808;
letter-spacing: 1em;
text-indent: 1em;
z-index: 2;
transition: all 0.4s;
&--active {
font-weight: bold;
color: #FFFFFF;
}
}
&__slider {
position: absolute;
height: inherit;
width: calc(476rpx / 2);
border-radius: inherit;
box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
z-index: 1;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
}
/* 切换 end */
/* 登录注册信息 start */
&__info {
margin: 80rpx 30rpx 10rpx 30rpx;
padding-bottom: 0;
border-radius: 20rpx;
&__item {
&__input {
margin-top: 59rpx;
width: 100%;
height: 77rpx;
border: 1rpx solid #E6E6E6;
border-radius: 39rpx;
&__left-icon {
width: 10%;
font-size: 44rpx;
margin-left: 20rpx;
color: #838383;
}
&__content {
width: 80%;
padding-left: 10rpx;
&--verify-code {
width: 56%;
}
input {
font-size: 24rpx;
// letter-spacing: 0.1em;
}
}
&__right-icon {
width: 10%;
font-size: 44rpx;
margin-right: 20rpx;
color: #838383;
}
&__right-verify-code {
width: 34%;
margin-right: 20rpx;
}
}
&__button {
margin-top: 75rpx;
margin-bottom: 39rpx;
width: 100%;
height: 77rpx;
text-align: center;
font-size: 31rpx;
font-weight: bold;
line-height: 77rpx;
letter-spacing: 1em;
text-indent: 1em;
border-radius: 39rpx;
box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
}
&__tips {
margin: 30rpx 0;
color: #AAAAAA;
}
}
}
/* 登录注册信息 end */
/* 登录方式切换 start */
&__way {
margin: 0 auto;
margin-top: 110rpx;
&__item {
&--icon {
width: 85rpx;
height: 85rpx;
font-size: 80rpx;
// border-radius: 100rpx;
margin-bottom: 18rpx;
position: relative;
z-index: 1;
// &::after {
// content: " ";
// position: absolute;
// z-index: -1;
// width: 100%;
// height: 100%;
// left: 0;
// bottom: 0;
// border-radius: inherit;
// opacity: 1;
// transform: scale(1, 1);
// background-size: 100% 100%;
// background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
// }
}
}
}
/* 登录方式切换 end */
/* 内容 end */
}
/deep/.input-placeholder {
font-size: 24rpx;
color: #838383;
}
</style>
templatePage/my/demo1/demo1.vue
+430 -343
View File
@@ -1,343 +1,430 @@
<template>
<view class="template-about tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar> -->
<view class="top-backgroup">
<image src='https://tnuiimage.tnkjapp.com/swiper/summer.jpg' mode='widthFix' class='backgroud-image'></image>
</view>
<view class="about__wrap">
<!-- 头像用户信息 -->
<view class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
<view class="user-info__avatar tn-bg-grey--light tn-flex tn-flex-col-center tn-flex-row-center">
<view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;"></view>
</view>
<view class="user-info__nick-name">图鸟科技</view>
</view>
<!-- 消息&数据 -->
<view class="tn-shadow-warp" style="margin-top: 100rpx;border-radius: 12rpx;background-color: rgba(255,255,255,1);">
<view class="tn-flex">
<view class="tn-flex-1 tn-padding-sm tn-margin-xs">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="">
<view class="tn-text-xxl tn-color-orange">1.29W</view>
</view>
<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
<text class="tn-icon-fire"></text>
<text class="tn-padding-left-xs">人气</text>
</view>
</view>
</view>
<view class="tn-flex-1 tn-padding-sm tn-margin-xs">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="">
<view class="tn-text-xxl tn-color-blue">216</view>
</view>
<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
<text class="tn-icon-share-circle"></text>
<text class="tn-padding-left-xs">分享</text>
</view>
</view>
</view>
<view class="tn-flex-1 tn-padding-sm tn-margin-xs">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="">
<view class="tn-text-xxl tn-color-red">962</view>
</view>
<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
<text class="tn-icon-like"></text>
<text class="tn-padding-left-xs">爱心</text>
</view>
</view>
</view>
</view>
</view>
<!-- 更多信息-->
<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-5 tn-color-white" >
<view class="tn-icon-logo-tuniao"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">关于图鸟</view>
<view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white">
<view class="tn-icon-like-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">赞赏北北</view>
<!-- <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view> -->
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-2 tn-color-white">
<view class="tn-icon-set-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">更新日志</view>
<!-- <view class="tn-margin-left-sm tn-color-gray">懒</view> -->
</view>
</tn-list-cell>
</view>
<!-- 更多信息-->
<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-16 tn-color-white" >
<view class="tn-icon-wechat-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">合作勾搭</view>
<view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-8 tn-color-white">
<view class="tn-icon-message-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">问题反馈</view>
<view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white">
<view class="tn-icon-phone-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">技术支持</view>
<view class="tn-margin-left-sm tn-color-orangered tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-orange--disabled tn-round">136****0470</view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-12 tn-color-white">
<view class="tn-icon-safe-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">会员协议</view>
<view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view>
</view>
</tn-list-cell>
</view>
</view>
<!-- 底部tabbar start-->
<view class="tabbar footerfixed">
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-home-smile">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
</view>
<view class="tn-color-gray">首页</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-discover">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image>
</view>
<view class="tn-color-gray">圈子</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-image-text">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
</view>
<view class="tn-color-gray">案例</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-my">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tnnew.png'></image>
</view>
<view class="tn-color-black">我的</view>
</view>
</view>
<view class="tn-padding-xl"></view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import NavIndexButton from '@/libs/components/nav-index-button.vue'
export default {
name: 'about-demo-1',
mixins: [template_page_mixin],
components: { NavIndexButton },
data(){
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-about{
}
/* 顶部背景图 start */
.top-backgroup {
height: 450rpx;
z-index: -1;
.backgroud-image {
width: 100%;
height: 667rpx;
// z-index: -1;
}
}
/* 顶部背景图 end */
/* 页面 start*/
.about-shadow{
border-radius: 15rpx;
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}
.about {
&__wrap {
position: relative;
z-index: 1;
margin: 20rpx 30rpx;
margin-top: -330rpx;
}
}
/* 页面 end*/
/* 用户信息 start */
.user-info {
&__container {
}
&__avatar {
width: 170rpx;
height: 170rpx;
border: 8rpx solid rgba(255,255,255,0.05);
border-radius: 50%;
overflow: hidden;
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
}
&__nick-name {
margin-top: 26rpx;
font-size: 36rpx;
font-weight: 600;
text-align: center;
}
}
/* 用户信息 end */
/* 图标容器1 start */
.icon1 {
&__item {
// width: 30%;
background-color: #FFFFFF;
border-radius: 10rpx;
padding: 30rpx;
margin: 20rpx 10rpx;
transform: scale(1);
transition: transform 0.3s linear;
transform-origin: center center;
&--icon {
width: 40rpx;
height: 40rpx;
font-size: 28rpx;
border-radius: 50%;
position: relative;
z-index: 1;
&::after {
content: " ";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
border-radius: inherit;
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
}
}
}
}
/* 图标容器1 end */
/* 底部tabbar start*/
.footerfixed{
position: fixed;
width: 100%;
bottom: 0;
z-index: 999;
background-color: #FFFFFF;
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
}
.tabbar {
display: flex;
align-items: center;
min-height: 110rpx;
justify-content: space-between;
padding: 0;
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}
.tabbar .action {
font-size: 22rpx;
position: relative;
flex: 1;
text-align: center;
padding: 0;
display: block;
height: auto;
line-height: 1;
margin: 0;
overflow: initial;
}
.tabbar .action .bar-icon {
width: 100rpx;
position: relative;
display: block;
height: auto;
margin: 0 auto 10rpx;
text-align: center;
font-size: 42rpx;
}
.tabbar .action .bar-icon image {
width: 50rpx;
height: 50rpx;
display: inline-block;
}
</style>
<template>
<view class="template-about tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<!-- <tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar> -->
<view class="top-backgroup">
<image src='https://tnuiimage.tnkjapp.com/swiper/summer.jpg' mode='widthFix' class='backgroud-image'></image>
</view>
<view class="tnwave waveAnimation">
<view class="waveWrapperInner bgTop">
<view class="wave waveTop" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
</view>
<view class="waveWrapperInner bgMiddle">
<view class="wave waveMiddle" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
</view>
<view class="waveWrapperInner bgBottom">
<view class="wave waveBottom" style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-1.png')"></view>
</view>
</view>
<view class="about__wrap">
<!-- 头像用户信息 -->
<view class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
<view class="user-info__avatar tn-bg-grey--light tn-flex tn-flex-col-center tn-flex-row-center">
<view class="tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg');width: 170rpx;height: 170rpx;background-size: cover;">
</view>
<!-- <view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;"></view> -->
</view>
<view class="user-info__nick-name">图鸟科技</view>
</view>
<!-- 消息&数据 -->
<view class="tn-shadow-warp" style="margin-top: 100rpx;background-color: rgba(255,255,255,1);">
<view class="tn-flex">
<view class="tn-flex-1 tn-padding-sm tn-margin-xs">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="">
<view class="tn-text-xxl tn-color-orange">1.29W</view>
</view>
<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
<text class="tn-icon-fire"></text>
<text class="tn-padding-left-xs">人气</text>
</view>
</view>
</view>
<view class="tn-flex-1 tn-padding-sm tn-margin-xs">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="">
<view class="tn-text-xxl tn-color-blue">216</view>
</view>
<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
<text class="tn-icon-share-circle"></text>
<text class="tn-padding-left-xs">分享</text>
</view>
</view>
</view>
<view class="tn-flex-1 tn-padding-sm tn-margin-xs">
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="">
<view class="tn-text-xxl tn-color-red">962</view>
</view>
<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
<text class="tn-icon-like"></text>
<text class="tn-padding-left-xs">爱心</text>
</view>
</view>
</view>
</view>
</view>
<!-- 更多信息-->
<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm tn-margin-left tn-margin-right">
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-5 tn-color-white" >
<view class="tn-icon-logo-tuniao"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">关于图鸟</view>
<view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white">
<view class="tn-icon-like-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">赞赏北北</view>
<!-- <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view> -->
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-2 tn-color-white">
<view class="tn-icon-set-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">更新日志</view>
<!-- <view class="tn-margin-left-sm tn-color-gray">懒</view> -->
</view>
</tn-list-cell>
</view>
<!-- 更多信息-->
<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm tn-margin-left tn-margin-right">
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-16 tn-color-white" >
<view class="tn-icon-wechat-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">合作勾搭</view>
<view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-8 tn-color-white">
<view class="tn-icon-message-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">问题反馈</view>
<view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white">
<view class="tn-icon-phone-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">技术支持</view>
<view class="tn-margin-left-sm tn-color-orangered tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-orange--disabled tn-round">136****0470</view>
</view>
</tn-list-cell>
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-col-center">
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-12 tn-color-white">
<view class="tn-icon-safe-fill"></view>
</view>
<view class="tn-margin-left-sm tn-flex-1">会员协议</view>
<view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view>
</view>
</tn-list-cell>
</view>
</view>
<!-- 底部tabbar start-->
<view class="tabbar footerfixed">
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-home-smile">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
</view>
<view class="tn-color-gray">首页</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-discover">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image>
</view>
<view class="tn-color-gray">圈子</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-image-text">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
</view>
<view class="tn-color-gray">案例</view>
</view>
<view class="action">
<view class="bar-icon">
<!-- <view class="tn-icon-my">
</view> -->
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tnnew.png'></image>
</view>
<view class="tn-color-black">我的</view>
</view>
</view>
<view class="tn-padding-xl"></view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import NavIndexButton from '@/libs/components/nav-index-button.vue'
export default {
name: 'about-demo-1',
mixins: [template_page_mixin],
components: { NavIndexButton },
data(){
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-about{
}
/* 顶部背景图 start */
.top-backgroup {
height: 450rpx;
z-index: -1;
.backgroud-image {
width: 100%;
height: 450rpx;
// z-index: -1;
}
}
/* 顶部背景图 end */
/* 波浪*/
@keyframes move_wave {
0% {
transform: translateX(0) translateZ(0) scaleY(1)
}
50% {
transform: translateX(-25%) translateZ(0) scaleY(1)
}
100% {
transform: translateX(-50%) translateZ(0) scaleY(1)
}
}
.tnwave {
overflow: hidden;
position: absolute;
z-index: 9999;
height: 200rpx;
left: 0;
right: 0;
top: 290rpx;
bottom: auto;
}
.waveWrapperInner {
position: absolute;
width: 100%;
overflow: hidden;
height: 100%;
}
.wave {
position: absolute;
left: 0;
width: 200%;
height: 100%;
background-repeat: repeat no-repeat;
background-position: 0 bottom;
transform-origin: center bottom;
}
.bgTop {
opacity: 0.4;
}
.waveTop {
background-size: 50% 45px;
}
.waveAnimation .waveTop {
animation: move_wave 4s linear infinite;
}
.bgMiddle {
opacity: 0.6;
}
.waveMiddle {
background-size: 50% 40px;
}
.waveAnimation .waveMiddle {
animation: move_wave 3.5s linear infinite;
}
.bgBottom {
opacity: 0.95;
}
.waveBottom {
background-size: 50% 35px;
}
.waveAnimation .waveBottom {
animation: move_wave 2s linear infinite;
}
/* 波浪*/
/* 页面 start*/
.about-shadow{
border-radius: 15rpx;
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}
.about {
&__wrap {
position: relative;
z-index: 1;
// margin: 20rpx 30rpx;
margin-top: -330rpx;
}
}
/* 页面 end*/
/* 用户信息 start */
.user-info {
&__container {
}
&__avatar {
width: 170rpx;
height: 170rpx;
border: 8rpx solid rgba(255,255,255,0.05);
border-radius: 50%;
overflow: hidden;
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
}
&__nick-name {
margin-top: 26rpx;
font-size: 36rpx;
font-weight: 600;
text-align: center;
}
}
/* 用户信息 end */
/* 图标容器1 start */
.icon1 {
&__item {
// width: 30%;
background-color: #FFFFFF;
border-radius: 10rpx;
padding: 30rpx;
margin: 20rpx 10rpx;
transform: scale(1);
transition: transform 0.3s linear;
transform-origin: center center;
&--icon {
width: 40rpx;
height: 40rpx;
font-size: 28rpx;
border-radius: 50%;
position: relative;
z-index: 1;
&::after {
content: " ";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
border-radius: inherit;
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
}
}
}
}
/* 图标容器1 end */
/* 底部tabbar start*/
.footerfixed{
position: fixed;
width: 100%;
bottom: 0;
z-index: 999;
background-color: #FFFFFF;
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
}
.tabbar {
display: flex;
align-items: center;
min-height: 110rpx;
justify-content: space-between;
padding: 0;
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}
.tabbar .action {
font-size: 22rpx;
position: relative;
flex: 1;
text-align: center;
padding: 0;
display: block;
height: auto;
line-height: 1;
margin: 0;
overflow: initial;
}
.tabbar .action .bar-icon {
width: 100rpx;
position: relative;
display: block;
height: auto;
margin: 0 auto 10rpx;
text-align: center;
font-size: 42rpx;
}
.tabbar .action .bar-icon image {
width: 50rpx;
height: 50rpx;
display: inline-block;
}
</style>
templatePage/my/demo2/demo2.vue
+803 -801
View File
File diff suppressed because it is too large Load Diff
templatePage/my/demo3/demo3.vue
+957 -955
View File
File diff suppressed because it is too large Load Diff
templatePage/my/demo4/demo4.vue
+1089
View File
File diff suppressed because it is too large Load Diff
templatePage/time/clock/clock.vue
+874 -874
View File
File diff suppressed because it is too large Load Diff