mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-06-07 03:53:57 +08:00
update
This commit is contained in:
7small7
@@ -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.$tn.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.$tn.number.random(0.22 * width, 0.33 * width),
|
||||
y: this.$tn.number.random(0.5 * height, 0.75 * height)
|
||||
}
|
||||
const p2 = {
|
||||
x: this.$tn.number.random(0, 0.88 * width),
|
||||
y: this.$tn.number.random(0.25 * height, 0.5 * height)
|
||||
}
|
||||
const p3 = {
|
||||
x: this.$tn.number.random(0, 0.88 * width),
|
||||
y: this.$tn.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>
|
||||
@@ -0,0 +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>
|
||||
@@ -0,0 +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>
|
||||
@@ -0,0 +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>
|
||||
@@ -0,0 +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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,621 @@
|
||||
<template>
|
||||
<view class="template-screen 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" @tap.stop="goBack">
|
||||
<!-- 返回按钮 -->
|
||||
<view class="custom-nav__back">
|
||||
<view class="tn-icon-backspace tn-color-white" style="font-size: 60rpx;"></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-center tn-color-white">
|
||||
<text class="tn-text-bold tn-text-xl">健康码</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view class="bg-contaniner">
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<view class="">
|
||||
<view class="tn-margin-top" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view class="tn-bg-white tn-margin tn-text-center" style="border-radius: 20rpx">
|
||||
<view class="tn-flex tn-flex-row-around tn-padding-sm tn-bg-blue--light" style="border-radius: 20rpx 20rpx 0 0;">
|
||||
<view class="justify-content-item">广州 <text class="tn-icon-down-triangle"></text> </view>
|
||||
<view class="justify-content-item">蔡*东</view>
|
||||
<view class="justify-content-item">添加成员</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="tn-text-bold tn-margin-top-xl" style="font-size: 60rpx;">12-1 17:01:42</view>
|
||||
<view class="tn-icon-qr-beibei tn-color-orange" style="font-size: 450rpx;">
|
||||
</view>
|
||||
<view class="tn-border-solid-top tn-padding">
|
||||
<text class="tn-icon-qr-code tn-padding-right-sm"></text>
|
||||
<text>不敢弄太真实，万一坏人拿去了，放黄码</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 方式12 start-->
|
||||
<view class="tn-flex tn-margin-xs">
|
||||
<view class="tn-flex-1 screen-shadow tn-bg-white" style="margin: 30rpx 20rpx;padding: 40rpx 0;">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-cyan--light tn-color-cyan--dark">
|
||||
<view class="tn-icon-safe-fill tn-three"></view>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<view class="tn-text-ellipsis tn-text-xl tn-color-teal--dark">核酸阴性</view>
|
||||
<view class="tn-text-ellipsis tn-color-gray--dark tn-padding-top-sm">2021-06-13 08:38</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 screen-shadow tn-bg-white" style="margin: 30rpx 20rpx;padding: 40rpx 0;">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-cyan--light tn-color-cyan--dark">
|
||||
<view class="tn-icon-trusty-fill tn-three"></view>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<view class="tn-text-ellipsis tn-text-xl tn-color-teal--dark">已完成全程接种</view>
|
||||
<view class="tn-text-ellipsis tn-color-gray--dark tn-padding-top-sm">2021-11-15</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="tn-bg-white" style="border-radius: 50rpx 50rpx 0 0;">
|
||||
<!-- 方式12 start-->
|
||||
<view class="tn-flex tn-flex-row-center tn-radius tn-padding-top">
|
||||
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-orange--light tn-color-orange">
|
||||
<view class="tn-icon-honor tn-three"></view>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">通关凭证</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-purple--light tn-color-purple">
|
||||
<view class="tn-icon-chemistry tn-three"></view>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">核酸检测</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-blue--light tn-color-blue">
|
||||
<view class="tn-icon-edit-form tn-three"></view>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">健康申报</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-purplered--light tn-color-purplered">
|
||||
<view class="tn-icon-identity tn-three"></view>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">通信行程</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 方式12 end-->
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 图文 -->
|
||||
<view class="tn-bg-white tn-flex tn-flex-direction-column" style="padding-bottom: 110rpx;">
|
||||
|
||||
<block v-for="(item,index) in content" :key="index">
|
||||
<view class="tn-blogger-content__wrap">
|
||||
<view class="">
|
||||
<!-- 方式一 -->
|
||||
<!-- <view class="tn-shadow-blur image-pic" :style="'background-image:url(' + item.mainImage + ')'">
|
||||
<view class="image-qrcode">
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- 方式二 -->
|
||||
<image
|
||||
class="tn-blogger-content__main-image tn-blogger-content__main-image--1 tn-margin-bottom"
|
||||
:src="item.mainImage[0]"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
<view class="tn-blogger-content__label tn-text-justify">
|
||||
<text class="tn-blogger-content__label__desc tn-text-lg tn-text-bold tn-padding">{{ item.desc }}</text>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
|
||||
<view class="justify-content-item tn-flex tn-flex-col-center">
|
||||
<view style="margin-right: 10rpx;margin-left: 0rpx;">
|
||||
<view class="tn-color-gray tn-padding">
|
||||
<text class="tn-blogger-content__count-icon tn-icon-flower"></text>
|
||||
<text class="tn-padding-right">{{ item.collectionCount }}</text>
|
||||
<text class="tn-blogger-content__count-icon tn-icon-message"></text>
|
||||
<text class="tn-padding-right">{{ item.commentCount }}</text>
|
||||
<text class="tn-blogger-content__count-icon tn-icon-like"></text>
|
||||
<text class="">{{ item.likeCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="justify-content-item tn-text-center">
|
||||
<view v-for="(label_item,label_index) in item.label" :key="label_index" class="tn-blogger-content__label__item tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
|
||||
<text class="tn-blogger-content__label__item--prefix">#</text> {{ label_item }}
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</block>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-home-smile tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tnnew.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-circle tn-shadow-blur">
|
||||
<view class="tn-icon-qr-code tn-color-white">
|
||||
</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-emoji-good tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateScreen',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {
|
||||
content: [
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
desc: '免费开源可商用组件',
|
||||
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: 65
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 65
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 65
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['站点','链接'],
|
||||
desc: 'https://www.yuque.com/tuniao',
|
||||
mainImage:[
|
||||
'https://tnuiimage.tnkjapp.com/shop/pillow2.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: 65
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
desc: '免费开源可商用组件',
|
||||
mainImage:[
|
||||
'https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.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: 65
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</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: 71%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 10rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-radius: 60rpx 60rpx 60rpx 0;
|
||||
font-size: 24rpx;
|
||||
// background-color: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
|
||||
.screen-shadow{
|
||||
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
/* 图标容器12 start */
|
||||
.icon12 {
|
||||
&__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: 100rpx;
|
||||
height: 100rpx;
|
||||
font-size: 60rpx;
|
||||
border-radius: 50%;
|
||||
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_bg.png);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 文章内容 start*/
|
||||
.tn-blogger-content {
|
||||
&__wrap {
|
||||
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.09);
|
||||
border-radius: 20rpx;
|
||||
margin: 30rpx;
|
||||
}
|
||||
|
||||
&__info {
|
||||
&__btn {
|
||||
margin-right: -12rpx;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
&__item {
|
||||
line-height: 45rpx;
|
||||
padding: 0 20rpx;
|
||||
margin: 5rpx 18rpx 0 0;
|
||||
|
||||
&--prefix {
|
||||
color: #00FFC8;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__desc {
|
||||
line-height: 55rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
|
||||
&--1 {
|
||||
max-width: 690rpx;
|
||||
min-width: 690rpx;
|
||||
max-height: 400rpx;
|
||||
min-height: 400rpx;
|
||||
}
|
||||
|
||||
&--2 {
|
||||
max-width: 260rpx;
|
||||
max-height: 260rpx;
|
||||
}
|
||||
|
||||
&--3 {
|
||||
height: 212rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__count-icon {
|
||||
font-size: 40rpx;
|
||||
padding-right: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.image-qrcode{
|
||||
padding: 180rpx 0rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
/* 文章内容 end*/
|
||||
|
||||
/* 移动背景部分 start*/
|
||||
.bg-contaniner {
|
||||
position: fixed;
|
||||
top: 0rpx;
|
||||
left: 0rpx;
|
||||
--text-color: hsl(0 95% 60%);
|
||||
--bg-color: hsl(0 0% 100%);
|
||||
--bg-size: 750rpx;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
overflow: hidden;
|
||||
background-color: #4392F4;
|
||||
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/health.png");
|
||||
background-size: var(--bg-size);
|
||||
background-repeat: repeat;
|
||||
transform: rotate(0deg);
|
||||
opacity: 0.15;
|
||||
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);
|
||||
}
|
||||
}
|
||||
/* 移动背景部分 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;
|
||||
// line-height: 50rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: -60rpx auto 20rpx;
|
||||
text-align: center;
|
||||
font-size: 52rpx;
|
||||
line-height: 90rpx;
|
||||
background-color: #01BEFF;
|
||||
width: 90rpx !important;
|
||||
height: 90rpx !important;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(1, 190, 255, 0.5);
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: inline-block;
|
||||
margin: 15rpx auto 15rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,732 @@
|
||||
<template>
|
||||
<view class="template-course 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 fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
|
||||
<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/logo/logo2.png')">
|
||||
<view class="logo-image">
|
||||
</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>
|
||||
</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view class="tn-margin" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<tn-swiper :list="banner" :height="350" :effect3d="false" mode="dot"></tn-swiper>
|
||||
</view>
|
||||
|
||||
<view class="tn-padding-top-xs">
|
||||
<!-- 方式15 start-->
|
||||
<view class="tn-flex tn-margin tn-flex-row-center tn-bg-white course-shadow course-radius">
|
||||
<view class="tn-padding-sm tn-margin-xs">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orange tn-color-white">
|
||||
<view class="tn-icon-calendar"></view>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<text class="tn-text-ellipsis">课程安排</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-sm tn-margin-xs">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-bluepurple tn-color-white">
|
||||
<view class="tn-icon-trophy"></view>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<text class="tn-text-ellipsis">获奖公告</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-sm tn-margin-xs">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-indigo tn-color-white">
|
||||
<view class="tn-icon-company"></view>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<text class="tn-text-ellipsis">校园活动</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-sm tn-margin-xs">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-purplered tn-color-white">
|
||||
<view class="tn-icon-comment"></view>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<text class="tn-text-ellipsis">家长反馈</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 方式15 end-->
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-margin-sm tn-padding-top">
|
||||
<view class="justify-content-item tn-text-bold tn-text-xl">
|
||||
<text class="tn-icon-title "></text>
|
||||
<text class="">教育专栏</text>
|
||||
</view>
|
||||
<view class="justify-content-item tn-text-lg">
|
||||
<text class="tn-padding-xs">更多</text>
|
||||
<text class="tn-icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between tn-margin-left tn-margin-right">
|
||||
<block v-for="(item, index) in tuniaoData" :key="index">
|
||||
<view class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-color-white tn-bg-blue--light tn-shadow-blur">
|
||||
<view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
|
||||
<view class="tn-info__item__left--icon tn-flex tn-flex-col-center tn-flex-row-center tn-color-white" :class="[`tn-bg-${item.color}--disabled`]">
|
||||
<view :class="[`tn-icon-${item.icon}`]"></view>
|
||||
</view>
|
||||
<view class="tn-info__item__left__content">
|
||||
<view class="tn-info__item__left__content--title tn-text-xl tn-color-aquablue--dark">{{ item.title }}</view>
|
||||
<!-- <view class="tn-info__item__left__content--data tn-padding-top-xs tn-color-black">
|
||||
{{ item.value }}
|
||||
<text class="tn-icon-right tn-padding-left-xs"></text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="tn-info__item__right">
|
||||
<view class="tn-info__item__right--icon">
|
||||
<view :class="[`tn-icon-${item.icon}`]"></view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-margin-sm">
|
||||
<view class="justify-content-item tn-text-bold tn-text-xl">
|
||||
<text class="tn-icon-title "></text>
|
||||
<text class="">学习交流</text>
|
||||
</view>
|
||||
<view class="justify-content-item tn-text-lg">
|
||||
<text class="tn-padding-xs">更多</text>
|
||||
<text class="tn-icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 比例 start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-sm">
|
||||
<block v-for="(item, index) in content" :key="index">
|
||||
<view class="" style="width: 50%;">
|
||||
<view class="tn-blogger-content__wrap">
|
||||
<view class="image-pic" :style="'background-image:url(' + item.mainImage + ')'">
|
||||
<view class="image-music">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-blogger-content__label tn-text-justify tn-padding-sm">
|
||||
<text class="tn-blogger-content__label__desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left-sm tn-padding-right-sm tn-padding-bottom-sm">
|
||||
<view class="justify-content-item tn-flex tn-flex-col-center">
|
||||
<view style="margin-right: 10rpx;margin-left: 20rpx;">
|
||||
<tn-avatar-group :lists="item.viewUser.latestUserAvatar" size="sm"></tn-avatar-group>
|
||||
</view>
|
||||
<text class="tn-color-gray">{{ item.viewUser.viewUserCount }}人</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 比例 end-->
|
||||
|
||||
</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/course-course.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-black">课程</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-watercup tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-fire-no.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">精选</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-ticket tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-play-no.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">播放</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-my tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-my-no.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 {
|
||||
banner: [{
|
||||
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner1.jpg'
|
||||
}, {
|
||||
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner2.jpg'
|
||||
}, {
|
||||
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner3.jpg'
|
||||
}, {
|
||||
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner4.jpg'
|
||||
}],
|
||||
tuniaoData: [
|
||||
{
|
||||
title: '热门专栏',
|
||||
icon: 'fire-fill',
|
||||
color: 'red',
|
||||
value: '我就看看'
|
||||
},
|
||||
{
|
||||
title: '优秀讲师',
|
||||
icon: 'praise-fill',
|
||||
color: 'blue',
|
||||
value: '我就看看'
|
||||
},
|
||||
{
|
||||
title: '必看攻略',
|
||||
icon: 'cardbag-fill',
|
||||
color: 'orange',
|
||||
value: '我就看看'
|
||||
},
|
||||
{
|
||||
title: '课程排行',
|
||||
icon: 'honor-fill',
|
||||
color: 'purple',
|
||||
value: '我就看看'
|
||||
}
|
||||
],
|
||||
content: [
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['烤肉','烤肉'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 999,
|
||||
commentCount: 999,
|
||||
likeCount: 999
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['炸串','火锅'],
|
||||
desc: '免费开源可商用组件',
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['烤肉','烤肉'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['烤肉','烤肉'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['烤肉','烤肉'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['烤肉','烤肉'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['烤肉','烤肉'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['烤肉','烤肉'],
|
||||
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: {
|
||||
|
||||
}
|
||||
}
|
||||
</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 start */
|
||||
.logo-image{
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
position: relative;
|
||||
}
|
||||
.logo-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
|
||||
/* 内容布局 start*/
|
||||
.course-shadow{
|
||||
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.course-radius{
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
/* 图标容器15 start */
|
||||
.icon15 {
|
||||
&__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: 100rpx;
|
||||
height: 100rpx;
|
||||
font-size: 60rpx;
|
||||
border-radius: 50%;
|
||||
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%;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 业务展示 start */
|
||||
.tn-info {
|
||||
|
||||
&__container {
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
&__item {
|
||||
width: 48%;
|
||||
margin: 15rpx 0rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
border-radius: 15rpx;
|
||||
|
||||
|
||||
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/3.png);
|
||||
}
|
||||
|
||||
&__left {
|
||||
|
||||
&--icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 30%;
|
||||
font-size: 50rpx;
|
||||
margin-right: 20rpx;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
font-size: 30rpx;
|
||||
|
||||
&--data {
|
||||
margin-top: 5rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__right {
|
||||
&--icon {
|
||||
position: absolute;
|
||||
right: 0upx;
|
||||
top: 50upx;
|
||||
font-size: 100upx;
|
||||
width: 108upx;
|
||||
height: 108upx;
|
||||
text-align: center;
|
||||
line-height: 60upx;
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 业务展示 end */
|
||||
|
||||
/* 文章内容 start*/
|
||||
.tn-blogger-content {
|
||||
&__wrap {
|
||||
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
border-radius: 20rpx;
|
||||
margin: 15rpx;
|
||||
}
|
||||
|
||||
&__info {
|
||||
&__btn {
|
||||
margin-right: -12rpx;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
&__item {
|
||||
line-height: 45rpx;
|
||||
padding: 0 20rpx;
|
||||
margin: 5rpx 18rpx 0 0;
|
||||
|
||||
&--prefix {
|
||||
color: #82B2FF;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__desc {
|
||||
line-height: 35rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
|
||||
&--1 {
|
||||
max-width: 690rpx;
|
||||
min-width: 690rpx;
|
||||
max-height: 400rpx;
|
||||
min-height: 400rpx;
|
||||
}
|
||||
|
||||
&--2 {
|
||||
max-width: 260rpx;
|
||||
max-height: 260rpx;
|
||||
}
|
||||
|
||||
&--3 {
|
||||
height: 212rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__count-icon {
|
||||
font-size: 30rpx;
|
||||
padding-right: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.image-music{
|
||||
padding: 100rpx 0rpx;
|
||||
font-size: 16rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
/* 文章内容 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>
|
||||
@@ -0,0 +1,527 @@
|
||||
<template>
|
||||
<view class="template-design 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>
|
||||
<tn-swiper :list="banner" :height="1000" :effect3d="false" mode="number"></tn-swiper>
|
||||
</view>
|
||||
|
||||
<!-- 方式10 start-->
|
||||
<view class="tn-flex tn-margin-top">
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon10__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-image-fill"></view>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-lg tn-text-center">
|
||||
<text class="tn-text-ellipsis">相册</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon10__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-live-stream-fill"></view>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-lg tn-text-center">
|
||||
<text class="tn-text-ellipsis">视频</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon10__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orange tn-color-white">
|
||||
<view class="tn-icon-image-text-fill"></view>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-lg tn-text-center">
|
||||
<text class="tn-text-ellipsis">日志</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon10__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-purple tn-color-white">
|
||||
<view class="tn-icon-topics-fill"></view>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-lg tn-text-center">
|
||||
<text class="tn-text-ellipsis">话题</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon10__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-cyan tn-color-white">
|
||||
<view class="tn-icon-discover-fill"></view>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-lg tn-text-center">
|
||||
<text class="tn-text-ellipsis">发现</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 方式10 end-->
|
||||
|
||||
|
||||
<!-- 图文 -->
|
||||
<view class="tn-flex tn-flex-direction-column">
|
||||
|
||||
<block v-for="(item,index) in content" :key="index">
|
||||
<view class="tn-blogger-content__wrap">
|
||||
<view class="tn-padding-top-xs">
|
||||
<!-- 方式一 -->
|
||||
<view class="tn-shadow-blur image-pic" :style="'background-image:url(' + item.mainImage + ')'">
|
||||
<view class="image-design">
|
||||
</view>
|
||||
</view>
|
||||
<!-- 方式二 -->
|
||||
<!-- <image
|
||||
class="tn-blogger-content__main-image tn-shadow tn-blogger-content__main-image--1 tn-margin-bottom-sm"
|
||||
:src="item.mainImage"
|
||||
mode="aspectFill"
|
||||
></image> -->
|
||||
</view>
|
||||
<view class="tn-blogger-content__label tn-text-justify tn-margin-top tn-margin-bottom-sm">
|
||||
<text class="tn-blogger-content__label__desc tn-text-bold tn-text-xl">{{ item.desc }}</text>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
|
||||
<view class="justify-content-item tn-flex tn-flex-col-center">
|
||||
<view style="margin-right: 10rpx;margin-left: 0rpx;">
|
||||
<view class="tn-color-gray">
|
||||
<text class="tn-blogger-content__count-icon tn-icon-flower"></text>
|
||||
<text class="tn-padding-right">{{ item.collectionCount }}</text>
|
||||
<text class="tn-blogger-content__count-icon tn-icon-message"></text>
|
||||
<text class="tn-padding-right">{{ item.commentCount }}</text>
|
||||
<text class="tn-blogger-content__count-icon tn-icon-like"></text>
|
||||
<text class="">{{ item.likeCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="justify-content-item tn-text-center">
|
||||
<view v-for="(label_item,label_index) in item.label" :key="label_index" class="tn-blogger-content__label__item tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
|
||||
<text class="tn-blogger-content__label__item--prefix">#</text> {{ label_item }}
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 边距间隔 -->
|
||||
<view class="tn-strip-bottom" v-if="index != content.length - 1"></view>
|
||||
</block>
|
||||
</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_tnnew.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-black">首页</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_tn.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: 'TemplateDesign',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
banner: [{
|
||||
image: 'https://tnuiimage.tnkjapp.com/swiper/swiper1.jpg'
|
||||
}, {
|
||||
image: 'https://tnuiimage.tnkjapp.com/swiper/swiper2.jpg'
|
||||
}, {
|
||||
image: 'https://tnuiimage.tnkjapp.com/swiper/swiper3.jpg'
|
||||
}, {
|
||||
image: 'https://tnuiimage.tnkjapp.com/swiper/swiper4.jpg'
|
||||
}],
|
||||
content: [
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 999,
|
||||
commentCount: 999,
|
||||
likeCount: 999
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
desc: '免费开源可商用组件',
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
.template-design{
|
||||
}
|
||||
/* 图标容器10 start */
|
||||
.icon10 {
|
||||
&__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: 84rpx;
|
||||
height: 65rpx;
|
||||
font-size: 45rpx;
|
||||
border-radius: 200rpx;
|
||||
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_bg6.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 图标容器10 end */
|
||||
|
||||
/* 文章内容 start*/
|
||||
.tn-blogger-content {
|
||||
&__wrap {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
&__info {
|
||||
&__btn {
|
||||
margin-right: -12rpx;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
&__item {
|
||||
line-height: 45rpx;
|
||||
padding: 0 20rpx;
|
||||
margin: 5rpx 18rpx 0 0;
|
||||
|
||||
&--prefix {
|
||||
color: #00FFC8;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__desc {
|
||||
line-height: 55rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
box-shadow: 0rpx 5rpx 40rpx 0rpx rgba(43, 158, 246, 0.2);
|
||||
border-radius: 16rpx;
|
||||
|
||||
&--1 {
|
||||
max-width: 690rpx;
|
||||
min-width: 690rpx;
|
||||
max-height: 400rpx;
|
||||
min-height: 400rpx;
|
||||
}
|
||||
|
||||
&--2 {
|
||||
max-width: 260rpx;
|
||||
max-height: 260rpx;
|
||||
}
|
||||
|
||||
&--3 {
|
||||
height: 212rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__count-icon {
|
||||
font-size: 40rpx;
|
||||
padding-right: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.image-design{
|
||||
padding: 180rpx 0rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
/* 文章内容 end*/
|
||||
|
||||
/* 间隔线 start*/
|
||||
.tn-strip-bottom {
|
||||
width: 100%;
|
||||
border-bottom: 20rpx solid rgba(241, 241, 241, 0.3);
|
||||
}
|
||||
/* 间隔线 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>
|
||||
@@ -0,0 +1,558 @@
|
||||
<template>
|
||||
<view class="template-job 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 fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
|
||||
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<!-- 返回按钮 -->
|
||||
<view class="custom-nav__back">
|
||||
<view class="logo-pic tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/logo/logo2.png')">
|
||||
<view class="logo-image">
|
||||
</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>
|
||||
</tn-nav-bar>
|
||||
|
||||
|
||||
<view class="tn-margin-top" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<tn-swiper :list="banner" :height="350" :effect3d="true" mode="round"></tn-swiper>
|
||||
</view>
|
||||
|
||||
<!-- 数据信息 -->
|
||||
<view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between tn-margin">
|
||||
<block v-for="(item, index) in tuniaoData" :key="index">
|
||||
<view class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between job-shadow">
|
||||
<view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
|
||||
<view class="tn-info__item__left--icon tn-flex tn-flex-col-center tn-flex-row-center tn-color-white" :class="[`tn-bg-${item.color}`]">
|
||||
<view :class="[`tn-icon-${item.icon}`]"></view>
|
||||
</view>
|
||||
<view class="tn-info__item__left__content">
|
||||
<view class="tn-info__item__left__content--title">{{ item.title }}</view>
|
||||
<view class="tn-info__item__left__content--data tn-padding-top-xs">{{ item.value }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-info__item__right">
|
||||
<view class="tn-info__item__right--icon">
|
||||
<view class="tn-icon-right"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 方式16 start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-margin job-shadow">
|
||||
<block v-for="(item, index) in icons" :key="index">
|
||||
<view class=" " style="width: 25%;">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-padding-xl">
|
||||
<view class="icon16__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<view class="tn-cool-color-icon16" :class="[$tn.color.getRandomCoolBgClass(index) + ' tn-icon-' + item.icon]"></view>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-lg tn-text-center">
|
||||
<text class="tn-text-ellipsis">{{item.title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 方式16 end-->
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-level">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-home.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-black">职位</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-level">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-honor.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-black">简历</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-circle tn-shadow-blur">
|
||||
<view class="tn-icon-message-fill tn-color-white">
|
||||
</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-level">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-up.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-black">提升</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-signpost tn-color-gray--dark">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-my.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: 'TemplateJob',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
banner: [{
|
||||
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner1.jpg'
|
||||
}, {
|
||||
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner2.jpg'
|
||||
}, {
|
||||
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner3.jpg'
|
||||
}, {
|
||||
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner4.jpg'
|
||||
}],
|
||||
tuniaoData: [
|
||||
{
|
||||
title: '职位推荐',
|
||||
icon: 'praise',
|
||||
color: 'purplered',
|
||||
value: '32'
|
||||
},
|
||||
{
|
||||
title: '课程专区',
|
||||
icon: 'discover',
|
||||
color: 'green',
|
||||
value: '65'
|
||||
},
|
||||
{
|
||||
title: '精选专题',
|
||||
icon: 'topics',
|
||||
color: 'orange',
|
||||
value: '26'
|
||||
},
|
||||
{
|
||||
title: '在线简历',
|
||||
icon: 'honor',
|
||||
color: 'indigo',
|
||||
value: '6'
|
||||
}
|
||||
],
|
||||
icons: [
|
||||
{
|
||||
icon: "shop",
|
||||
title: "电商",
|
||||
},
|
||||
{
|
||||
icon: "video",
|
||||
title: "直播",
|
||||
},
|
||||
{
|
||||
icon: "company",
|
||||
title: "建筑",
|
||||
},
|
||||
{
|
||||
icon: "computer",
|
||||
title: "互联网",
|
||||
},
|
||||
{
|
||||
icon: "focus",
|
||||
title: "猎头",
|
||||
},
|
||||
{
|
||||
icon: "sing",
|
||||
title: "音乐",
|
||||
},
|
||||
{
|
||||
icon: "code",
|
||||
title: "软件开发",
|
||||
},
|
||||
{
|
||||
icon: "medical",
|
||||
title: "医疗",
|
||||
},
|
||||
{
|
||||
icon: "biology",
|
||||
title: "生物",
|
||||
},
|
||||
{
|
||||
icon: "pharmacy",
|
||||
title: "制药",
|
||||
},
|
||||
{
|
||||
icon: "chemistry",
|
||||
title: "化学",
|
||||
},
|
||||
{
|
||||
icon: "creative",
|
||||
title: "教师",
|
||||
},
|
||||
{
|
||||
icon: "gloves",
|
||||
title: "行政文秘",
|
||||
},
|
||||
{
|
||||
icon: "caring",
|
||||
title: "通信技术",
|
||||
},
|
||||
{
|
||||
icon: "refund",
|
||||
title: "外贸",
|
||||
},
|
||||
{
|
||||
icon: "level",
|
||||
title: "土木",
|
||||
},
|
||||
{
|
||||
icon: "deploy",
|
||||
title: "机械",
|
||||
},
|
||||
{
|
||||
icon: "server",
|
||||
title: "电气",
|
||||
},
|
||||
{
|
||||
icon: "hardware",
|
||||
title: "电子",
|
||||
},
|
||||
{
|
||||
icon: "group-circle",
|
||||
title: "化工",
|
||||
},
|
||||
{
|
||||
icon: "cube",
|
||||
title: "材料",
|
||||
},
|
||||
{
|
||||
icon: "safe",
|
||||
title: "保险",
|
||||
},
|
||||
{
|
||||
icon: "coupon",
|
||||
title: "证券",
|
||||
},
|
||||
{
|
||||
icon: "funds",
|
||||
title: "银行",
|
||||
},
|
||||
{
|
||||
icon: "map",
|
||||
title: "会展",
|
||||
},
|
||||
{
|
||||
icon: "service",
|
||||
title: "客服",
|
||||
},
|
||||
{
|
||||
icon: "trophy",
|
||||
title: "销售",
|
||||
},
|
||||
{
|
||||
icon: "image-text",
|
||||
title: "编辑运营",
|
||||
},
|
||||
{
|
||||
icon: "brand",
|
||||
title: "投行",
|
||||
},
|
||||
{
|
||||
icon: "trusty",
|
||||
title: "法务",
|
||||
},
|
||||
{
|
||||
icon: "comment",
|
||||
title: "咨询",
|
||||
},
|
||||
{
|
||||
icon: "logistics",
|
||||
title: "快递物流",
|
||||
},
|
||||
{
|
||||
icon: "moon",
|
||||
title: "艺术设计",
|
||||
},
|
||||
{
|
||||
icon: "bankcard",
|
||||
title: "财务",
|
||||
},
|
||||
{
|
||||
icon: "trust",
|
||||
title: "人力",
|
||||
},
|
||||
{
|
||||
icon: "flag",
|
||||
title: "市场营销",
|
||||
},
|
||||
{
|
||||
icon: "signpost",
|
||||
title: "其他",
|
||||
}
|
||||
|
||||
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
.template-job{
|
||||
}
|
||||
/* 自定义导航栏内容 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;
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
|
||||
/*logo start */
|
||||
.logo-image{
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
position: relative;
|
||||
}
|
||||
.logo-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
/* 信息展示 start */
|
||||
.tn-info {
|
||||
|
||||
&__container {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
&__item {
|
||||
width: 48%;
|
||||
margin: 15rpx 0rpx;
|
||||
padding: 38rpx 28rpx;
|
||||
border-radius: 10rpx;
|
||||
|
||||
&__left {
|
||||
|
||||
&--icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
font-size: 40rpx;
|
||||
margin-right: 20rpx;
|
||||
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_bg3.png);
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
font-size: 30rpx;
|
||||
|
||||
&--data {
|
||||
margin-top: 5rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__right {
|
||||
&--icon {
|
||||
font-size: 30rpx;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.job-shadow{
|
||||
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
/* 信息展示 end */
|
||||
|
||||
/* 图标容器16 start */
|
||||
.tn-cool-color-icon16{
|
||||
// background-image: -webkit-linear-gradient(135deg, #ED1C24, #FECE12); 16
|
||||
// background-image: linear-gradient(135deg, #ED1C24, #FECE12);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-fill-color: transparent;
|
||||
}
|
||||
.icon16 {
|
||||
&__item {
|
||||
// width: 30%;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
padding: 0rpx;
|
||||
margin: 0rpx;
|
||||
transform: scale(1);
|
||||
transition: transform 0.3s linear;
|
||||
transform-origin: center center;
|
||||
|
||||
&--icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
font-size: 70rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 18rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 图标容器16 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;
|
||||
// line-height: 50rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: -30rpx auto 20rpx;
|
||||
text-align: center;
|
||||
font-size: 52rpx;
|
||||
line-height: 90rpx;
|
||||
background-color: #E72F8C;
|
||||
width: 90rpx !important;
|
||||
height: 90rpx !important;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(231, 47, 140, 0.5);
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: inline-block;
|
||||
margin: 15rpx auto 15rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,704 @@
|
||||
<template>
|
||||
<view class="template-music 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 fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
|
||||
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<!-- 返回按钮 -->
|
||||
<view class="custom-nav__back">
|
||||
<view class="tn-icon-sing" style="font-size: 60rpx;"></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-center 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-right">Craigie Hill 北北推荐吖</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<view class="tn-margin-left tn-margin-right tn-margin-top-lg" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<tn-swiper :list="banner" :height="300" :effect3d="false" mode="round"></tn-swiper>
|
||||
</view>
|
||||
|
||||
<!-- 方式12 start-->
|
||||
<view class="tn-flex tn-margin-sm">
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-purplered--light tn-color-purplered">
|
||||
<view class="tn-icon-like-fill tn-three"></view>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">心动模式</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-indigo--light tn-color-indigo">
|
||||
<view class="tn-icon-live-stream-fill tn-three"></view>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">优质MV</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-purple--light tn-color-purple">
|
||||
<view class="tn-icon-moon-fill tn-three"></view>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">动听单曲</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-orange--light tn-color-orange">
|
||||
<view class="tn-icon-statistics-fill tn-three"></view>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-center">
|
||||
<text class="tn-text-ellipsis">排行榜</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 方式12 end-->
|
||||
|
||||
<!-- 图文 -->
|
||||
<!-- 比例 start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-sm">
|
||||
<block v-for="(item, index) in content" :key="index">
|
||||
<view class="" style="width: 50%;">
|
||||
<view class="tn-blogger-content__wrap">
|
||||
<view class="image-pic" :style="'background-image:url(' + item.mainImage + ')'">
|
||||
<view class="image-music">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-blogger-content__label tn-text-justify tn-padding-sm">
|
||||
<text class="tn-blogger-content__label__desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left-sm tn-padding-right-sm tn-padding-bottom-sm">
|
||||
<view class="justify-content-item tn-flex tn-flex-col-center">
|
||||
<view>
|
||||
<view class="tn-color-gray">
|
||||
<text class="tn-blogger-content__count-icon tn-icon-flower"></text>
|
||||
<text class="tn-padding-right-sm">{{ item.collectionCount }}</text>
|
||||
<text class="tn-blogger-content__count-icon tn-icon-message"></text>
|
||||
<text class="tn-padding-right-sm">{{ item.commentCount }}</text>
|
||||
<text class="tn-blogger-content__count-icon tn-icon-like"></text>
|
||||
<text class="">{{ item.likeCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="justify-content-item tn-text-center">
|
||||
<view v-for="(label_item,label_index) in item.label" :key="label_index" class="tn-blogger-content__label__item tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
|
||||
<text class="tn-blogger-content__label__item--prefix">#</text> {{ label_item }}
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 比例 end-->
|
||||
|
||||
|
||||
|
||||
<view class="tn-bg-white tn-flex tn-flex-direction-column tn-padding-bottom tn-margin-sm">
|
||||
|
||||
<block v-for="(item,index) in content" :key="index">
|
||||
<view class="tn-blogger-content__wrap">
|
||||
<view class="">
|
||||
<!-- 方式一 -->
|
||||
<view class="tn-shadow-blur image-pic" :style="'background-image:url(' + item.mainImage + ')'">
|
||||
<view class="image-music">
|
||||
</view>
|
||||
</view>
|
||||
<!-- 方式二 -->
|
||||
<!-- <image
|
||||
class="tn-blogger-content__main-image tn-blogger-content__main-image--1 tn-margin-bottom"
|
||||
:src="item.mainImage"
|
||||
mode="aspectFill"
|
||||
></image> -->
|
||||
</view>
|
||||
<view class="tn-blogger-content__label tn-text-justify tn-margin">
|
||||
<text class="tn-blogger-content__label__desc tn-text-lg tn-text-bold">{{ item.desc }}</text>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
|
||||
<view class="justify-content-item tn-flex tn-flex-col-center">
|
||||
<view style="margin-right: 10rpx;margin-left: 0rpx;">
|
||||
<view class="tn-color-gray tn-padding-left tn-padding-right tn-padding-bottom">
|
||||
<text class="tn-blogger-content__count-icon tn-icon-flower"></text>
|
||||
<text class="tn-padding-right-sm">{{ item.collectionCount }}</text>
|
||||
<text class="tn-blogger-content__count-icon tn-icon-message"></text>
|
||||
<text class="tn-padding-right-sm">{{ item.commentCount }}</text>
|
||||
<text class="tn-blogger-content__count-icon tn-icon-like"></text>
|
||||
<text class="">{{ item.likeCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="justify-content-item tn-text-center tn-padding-bottom">
|
||||
<view v-for="(label_item,label_index) in item.label" :key="label_index" class="tn-blogger-content__label__item tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
|
||||
<text class="tn-blogger-content__label__item--prefix">#</text> {{ label_item }}
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action navbar__item -blue">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-home-capsule navbar__icon">
|
||||
</view>
|
||||
</view>
|
||||
<view class="-blue bar-text">
|
||||
<text style="margin-bottom:-100rpx;font-size:20rpx;color:#303030;">首页</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action navbar__item -orange">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-discover-planet navbar__icon">
|
||||
</view>
|
||||
</view>
|
||||
<view class="-orange bar-text">
|
||||
<text style="margin-bottom:-100rpx;font-size:20rpx;color:#303030;">圈子</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action navbar__item -yellow">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-honor navbar__icon">
|
||||
</view>
|
||||
</view>
|
||||
<view class="-yellow bar-text">
|
||||
<text style="margin-bottom:-100rpx;font-size:20rpx;color:#303030;">榜单</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action navbar__item -purple">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-my navbar__icon">
|
||||
<!-- <tn-badge :absolute="true">99+</tn-badge> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="-purple bar-text">
|
||||
<text style="margin-bottom:-100rpx;font-size:20rpx;color:#303030;">我的</text>
|
||||
</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: 'TemplateMusic',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
banner: [{
|
||||
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner1.jpg'
|
||||
}, {
|
||||
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner2.jpg'
|
||||
}, {
|
||||
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner3.jpg'
|
||||
}, {
|
||||
image: 'https://tnuiimage.tnkjapp.com/swiper/tnbanner4.jpg'
|
||||
}],
|
||||
content: [
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 999,
|
||||
commentCount: 999,
|
||||
likeCount: 999
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
desc: '免费开源可商用组件',
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
.template-music{
|
||||
}
|
||||
|
||||
/* 自定义导航栏内容 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;
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
|
||||
/* 图标容器12 start */
|
||||
.tn-three{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 50%;
|
||||
bottom: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-38rpx, -16rpx) rotateX(30deg) rotateY(20deg) rotateZ(-30deg);
|
||||
text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.icon12 {
|
||||
&__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: 100rpx;
|
||||
height: 100rpx;
|
||||
font-size: 60rpx;
|
||||
border-radius: 50%;
|
||||
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_bg.png);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 文章内容 start*/
|
||||
.tn-blogger-content {
|
||||
&__wrap {
|
||||
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.12);
|
||||
border-radius: 20rpx;
|
||||
margin: 15rpx;
|
||||
}
|
||||
|
||||
&__info {
|
||||
&__btn {
|
||||
margin-right: -12rpx;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
&__item {
|
||||
line-height: 45rpx;
|
||||
padding: 0 20rpx;
|
||||
margin: 5rpx 18rpx 0 0;
|
||||
|
||||
&--prefix {
|
||||
color: #82B2FF;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__desc {
|
||||
line-height: 35rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
|
||||
&--1 {
|
||||
max-width: 690rpx;
|
||||
min-width: 690rpx;
|
||||
max-height: 400rpx;
|
||||
min-height: 400rpx;
|
||||
}
|
||||
|
||||
&--2 {
|
||||
max-width: 260rpx;
|
||||
max-height: 260rpx;
|
||||
}
|
||||
|
||||
&--3 {
|
||||
height: 212rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__count-icon {
|
||||
font-size: 30rpx;
|
||||
padding-right: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.image-music{
|
||||
padding: 150rpx 0rpx;
|
||||
font-size: 16rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
/* 文章内容 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;
|
||||
}
|
||||
|
||||
/* 底部标签栏动画 */
|
||||
.navbar__item .bar-text {
|
||||
font-variant: small-caps;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
vertical-align: middle;
|
||||
background-color: currentColor;
|
||||
border-radius: 50%;
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
transition: all 0.55s cubic-bezier(0.71, 0.03, 0.23, 0.95);
|
||||
}
|
||||
|
||||
.navbar__item.-blue {
|
||||
color: #06b8ff;
|
||||
}
|
||||
|
||||
.navbar__item.-orange {
|
||||
color: #f2704d;
|
||||
}
|
||||
|
||||
.navbar__item.-yellow {
|
||||
color: #f8cd4b;
|
||||
}
|
||||
|
||||
.navbar__item.-purple {
|
||||
color: #8444d6;
|
||||
}
|
||||
|
||||
.bar-text.-blue {
|
||||
color: #06b8ff;
|
||||
}
|
||||
|
||||
.bar-text.-orange {
|
||||
color: #f2704d;
|
||||
}
|
||||
|
||||
.bar-text.-yellow {
|
||||
color: #f8cd4b;
|
||||
}
|
||||
|
||||
.bar-text.-purple {
|
||||
color: #8444d6;
|
||||
}
|
||||
|
||||
.navbar__item:hover .bar-text {
|
||||
transform: translateY(-74rpx) scale(1.4);
|
||||
opacity: 1;
|
||||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1),
|
||||
-1px -1px 5px rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.navbar__item:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.navbar__item:hover::after {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.navbar__item:hover .navbar__icon {
|
||||
transform: translateY(-42rpx) scale(1);
|
||||
color: #fff;
|
||||
transition-delay: 0.1s, 0.1s;
|
||||
}
|
||||
|
||||
.navbar__icon {
|
||||
bottom: -26rpx;
|
||||
transition: all 0.5s cubic-bezier(0.71, 0.03, 0.23, 0.95);
|
||||
transition-delay: 0.1s;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,704 @@
|
||||
<template>
|
||||
<view class="template-screen 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 fixed :isBack="false" :bottomShadow="false" backgroundColor="#3D7EFF80">
|
||||
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<!-- 按钮 -->
|
||||
<view class="custom-nav__back">
|
||||
<view class="tn-icon-caring tn-color-white" style="font-size: 60rpx;"></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-white">
|
||||
<view class="custom-nav__search__icon tn-icon-search"></view>
|
||||
<view class="custom-nav__search__text tn-padding-left-xs">试试搜索“电影投屏”</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view class="bg-contaniner tn-bg-blue">
|
||||
|
||||
</view>
|
||||
<view class="tn-margin-top-lg" style="padding-bottom: 120rpx;">
|
||||
<view class="tn-padding" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<tn-swiper :list="banner" :height="350" :effect3d="false" mode="dot"></tn-swiper>
|
||||
</view>
|
||||
<!-- 方式15 start-->
|
||||
<view class="tn-flex tn-margin-sm tn-flex-row-center tn-radius">
|
||||
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-white" style="background-color: rgba(255,255,255,0.1);">
|
||||
<view class="tn-icon-scan"></view>
|
||||
</view>
|
||||
<view class="tn-color-white tn-text-center">
|
||||
<text class="tn-text-ellipsis">扫码投屏</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-white" style="background-color: rgba(255,255,255,0.1);">
|
||||
<view class="tn-icon-share-circle"></view>
|
||||
</view>
|
||||
<view class="tn-color-white tn-text-center">
|
||||
<text class="tn-text-ellipsis">邀请投屏</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-white" style="background-color: rgba(255,255,255,0.1);">
|
||||
<view class="tn-icon-star"></view>
|
||||
</view>
|
||||
<view class="tn-color-white tn-text-center">
|
||||
<text class="tn-text-ellipsis">收藏投屏</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-white" style="background-color: rgba(255,255,255,0.1);">
|
||||
<view class="tn-icon-set"></view>
|
||||
</view>
|
||||
<view class="tn-color-white tn-text-center">
|
||||
<text class="tn-text-ellipsis">投屏设置</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 方式15 end-->
|
||||
</view>
|
||||
|
||||
<view class="tn-bg-white" style="margin-top: -100rpx;border-radius: 50rpx 50rpx 0 0;">
|
||||
<!-- 方式7 start-->
|
||||
<view class="tn-flex tn-margin-xs tn-padding-top-xl">
|
||||
<view class="tn-flex-1 screen-shadow" style="margin: 30rpx 20rpx;padding: 60rpx 0;">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/icon/5.jpg' mode='aspectFit'></image>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<view class="tn-text-ellipsis tn-color-black tn-text-lg ">资料投屏</view>
|
||||
<view class="tn-text-ellipsis tn-color-gray--dark">选择资料投屏</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 screen-shadow" style="margin: 30rpx 20rpx;padding: 60rpx 0;">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/icon/6.jpg' mode='aspectFit'></image>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<view class="tn-text-ellipsis tn-color-black tn-text-lg ">文件投屏</view>
|
||||
<view class="tn-text-ellipsis tn-color-gray--dark">选择文件投屏</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex tn-margin-xs" style="margin-top: -10rpx;">
|
||||
<view class="tn-flex-1 screen-shadow" style="margin: 10rpx 20rpx;padding: 60rpx 0;">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/icon/7.jpg' mode='aspectFit'></image>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<view class="tn-text-ellipsis tn-color-black tn-text-lg ">电脑投屏</view>
|
||||
<view class="tn-text-ellipsis tn-color-gray--dark">匹配电脑投屏</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 screen-shadow" style="margin: 10rpx 20rpx;padding: 60rpx 0;">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/icon/8.jpg' mode='aspectFit'></image>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<view class="tn-text-ellipsis tn-color-black tn-text-lg ">文档投屏</view>
|
||||
<view class="tn-text-ellipsis tn-color-gray--dark">选择文档投屏</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 方式7 end-->
|
||||
|
||||
<!-- 图文 -->
|
||||
<view class="tn-bg-white tn-flex tn-flex-direction-column tn-padding-bottom" style="padding-bottom: 110rpx;">
|
||||
|
||||
<block v-for="(item,index) in content" :key="index">
|
||||
<view class="tn-blogger-content__wrap">
|
||||
<view class="">
|
||||
<!-- 方式一 -->
|
||||
<!-- <view class="tn-shadow-blur image-pic" :style="'background-image:url(' + item.mainImage + ')'">
|
||||
<view class="image-screen">
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- 方式二 -->
|
||||
<image
|
||||
class="tn-blogger-content__main-image tn-blogger-content__main-image--1 tn-margin-bottom"
|
||||
:src="item.mainImage"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
<view class="tn-blogger-content__label tn-text-justify">
|
||||
<text class="tn-blogger-content__label__desc tn-text-lg tn-text-bold tn-padding">{{ item.desc }}</text>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
|
||||
<view class="justify-content-item tn-flex tn-flex-col-center">
|
||||
<view style="margin-right: 10rpx;margin-left: 0rpx;">
|
||||
<view class="tn-color-gray tn-padding">
|
||||
<text class="tn-blogger-content__count-icon tn-icon-flower"></text>
|
||||
<text class="tn-padding-right">{{ item.collectionCount }}</text>
|
||||
<text class="tn-blogger-content__count-icon tn-icon-message"></text>
|
||||
<text class="tn-padding-right">{{ item.commentCount }}</text>
|
||||
<text class="tn-blogger-content__count-icon tn-icon-like"></text>
|
||||
<text class="">{{ item.likeCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="justify-content-item tn-text-center">
|
||||
<view v-for="(label_item,label_index) in item.label" :key="label_index" class="tn-blogger-content__label__item tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
|
||||
<text class="tn-blogger-content__label__item--prefix">#</text> {{ label_item }}
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</block>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-level">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/yellow/home_cur.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-black">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-circle tn-shadow-blur">
|
||||
<view class="tn-icon-discover-planet tn-color-white">
|
||||
</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-signpost tn-color-gray--dark">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/yellow/me.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</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: 'TemplateScreen',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
banner: [{
|
||||
image: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg'
|
||||
}, {
|
||||
image: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg'
|
||||
}, {
|
||||
image: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg'
|
||||
}, {
|
||||
image: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg'
|
||||
}],
|
||||
content: [
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 999,
|
||||
commentCount: 999,
|
||||
likeCount: 999
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
desc: '免费开源可商用组件',
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: {
|
||||
|
||||
}
|
||||
}
|
||||
</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 60rpx 0;
|
||||
font-size: 24rpx;
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
|
||||
.screen-shadow{
|
||||
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
/* 图标容器15 start */
|
||||
.icon15 {
|
||||
&__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: 100rpx;
|
||||
height: 100rpx;
|
||||
font-size: 60rpx;
|
||||
border-radius: 50%;
|
||||
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%;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 图标容器7 start */
|
||||
.icon7 {
|
||||
&__item {
|
||||
width: 30%;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
padding: 10rpx;
|
||||
margin: 20rpx 10rpx;
|
||||
transform: scale(1);
|
||||
transition: transform 0.3s linear;
|
||||
transform-origin: center center;
|
||||
|
||||
&--icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
font-size: 60rpx;
|
||||
border-radius: 0;
|
||||
margin-bottom: 18rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 文章内容 start*/
|
||||
.tn-blogger-content {
|
||||
&__wrap {
|
||||
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.09);
|
||||
border-radius: 20rpx;
|
||||
margin: 30rpx;
|
||||
}
|
||||
|
||||
&__info {
|
||||
&__btn {
|
||||
margin-right: -12rpx;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
&__item {
|
||||
line-height: 45rpx;
|
||||
padding: 0 20rpx;
|
||||
margin: 5rpx 18rpx 0 0;
|
||||
|
||||
&--prefix {
|
||||
color: #00FFC8;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__desc {
|
||||
line-height: 55rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
|
||||
&--1 {
|
||||
max-width: 690rpx;
|
||||
min-width: 690rpx;
|
||||
max-height: 400rpx;
|
||||
min-height: 400rpx;
|
||||
}
|
||||
|
||||
&--2 {
|
||||
max-width: 260rpx;
|
||||
max-height: 260rpx;
|
||||
}
|
||||
|
||||
&--3 {
|
||||
height: 212rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__count-icon {
|
||||
font-size: 40rpx;
|
||||
padding-right: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.image-screen{
|
||||
padding: 180rpx 0rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
/* 文章内容 end*/
|
||||
|
||||
/* 移动背景部分 start*/
|
||||
.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;
|
||||
overflow: hidden;
|
||||
background-color: var(--bg-color);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.bg-contaniner::before {
|
||||
--size: 150vmax;
|
||||
content: "";
|
||||
inline-size: var(--size);
|
||||
block-size: var(--size);
|
||||
background-image: url("https://tnuiimage.tnkjapp.com/animate/animate3.png");
|
||||
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);
|
||||
}
|
||||
}
|
||||
/* 移动背景部分 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;
|
||||
// line-height: 50rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: -30rpx auto 20rpx;
|
||||
text-align: center;
|
||||
font-size: 52rpx;
|
||||
line-height: 90rpx;
|
||||
background-color: #FFCA28;
|
||||
width: 90rpx !important;
|
||||
height: 90rpx !important;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(255, 202, 40, 0.5);
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: inline-block;
|
||||
margin: 15rpx auto 15rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,614 @@
|
||||
<template>
|
||||
<view class="template-wallpaper tn-safe-area-inset-bottom" style="background-color: #343434;">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<!-- <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 fixed :isBack="false" :bottomShadow="false" backgroundColor="#343434">
|
||||
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<!-- 返回按钮 -->
|
||||
<view class="custom-nav__back">
|
||||
<view class="logo-pic" style="background-image:url('https://tnuiimage.tnkjapp.com/logo/logo2.png')">
|
||||
<view class="logo-image">
|
||||
</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-center tn-color-white">
|
||||
<text class="tn-text-bold tn-text-xxl">北北壁纸库</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
|
||||
<!-- 页面内容-->
|
||||
<view class="">
|
||||
<view class="tn-margin" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<tn-swiper :list="banner" :height="350" :effect3d="false" mode="rect"></tn-swiper>
|
||||
</view>
|
||||
|
||||
<!-- 方式12 start-->
|
||||
<view class="tn-flex tn-margin-sm">
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-orange--light tn-color-orange">
|
||||
<view class="tn-icon-moon-fill tn-three"></view>
|
||||
</view>
|
||||
<view class="tn-color-white tn-text-center">
|
||||
<text class="tn-text-ellipsis">高清壁纸</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-purple--light tn-color-purple">
|
||||
<view class="tn-icon-light-fill tn-three"></view>
|
||||
</view>
|
||||
<view class="tn-color-white tn-text-center">
|
||||
<text class="tn-text-ellipsis">热门排行</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-indigo--light tn-color-indigo">
|
||||
<view class="tn-icon-star-fill tn-three"></view>
|
||||
</view>
|
||||
<view class="tn-color-white tn-text-center">
|
||||
<text class="tn-text-ellipsis">文艺可爱</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-main-gradient-purplered--light tn-color-purplered">
|
||||
<view class="tn-icon-like-fill tn-three"></view>
|
||||
</view>
|
||||
<view class="tn-color-white tn-text-center">
|
||||
<text class="tn-text-ellipsis">精选壁纸</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 方式12 end-->
|
||||
|
||||
<!-- banner start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-xs">
|
||||
<view class=" " style="width: 100%;">
|
||||
<view class="image-pic tn-margin-sm" style="background-image:url('https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg')">
|
||||
<view class="image-wallpaper">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- banner end-->
|
||||
|
||||
<!-- 比例 start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-xs">
|
||||
<block v-for="(item, index) in pic" :key="index">
|
||||
<view class=" " style="width: 50%;">
|
||||
<view class="image-pic tn-margin-sm" :style="'background-image:url(' + item.image + ')'">
|
||||
<view class="image-wallpaper">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 比例 end-->
|
||||
|
||||
<!-- 图文 -->
|
||||
<view class="tn-flex tn-flex-direction-column">
|
||||
|
||||
<block v-for="(item,index) in content" :key="index">
|
||||
<view class="tn-blogger-content__wrap">
|
||||
<view class="">
|
||||
<image
|
||||
class="tn-blogger-content__main-image tn-blogger-content__main-image--1 tn-margin-bottom tn-margin-top"
|
||||
:src="item.mainImage"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
<view class="tn-blogger-content__label tn-text-justify">
|
||||
<text class="tn-blogger-content__label__desc tn-text-lg tn-text-bold tn-color-white">{{ item.desc }}</text>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
|
||||
<view class="justify-content-item tn-flex tn-flex-col-center">
|
||||
<view style="margin-right: 10rpx;margin-left: 0rpx;">
|
||||
<view class="tn-color-gray">
|
||||
<text class="tn-blogger-content__count-icon tn-icon-flower"></text>
|
||||
<text class="tn-padding-right">{{ item.collectionCount }}</text>
|
||||
<text class="tn-blogger-content__count-icon tn-icon-message"></text>
|
||||
<text class="tn-padding-right">{{ item.commentCount }}</text>
|
||||
<text class="tn-blogger-content__count-icon tn-icon-like"></text>
|
||||
<text class="">{{ item.likeCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="justify-content-item tn-text-center">
|
||||
<view v-for="(label_item,label_index) in item.label" :key="label_index" class="tn-blogger-content__label__item tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
|
||||
<text class="tn-blogger-content__label__item--prefix">#</text> {{ label_item }}
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</block>
|
||||
</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/wallpaper-home.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-white">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-watercup tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/wallpaper-more.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">投稿</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-ticket tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/wallpaper-my.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: 'TemplateWallpaper',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
|
||||
banner: [{
|
||||
image: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg'
|
||||
}, {
|
||||
image: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg'
|
||||
}, {
|
||||
image: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg'
|
||||
}, {
|
||||
image: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg'
|
||||
}],
|
||||
pic: [{
|
||||
image: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg'
|
||||
}, {
|
||||
image: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg'
|
||||
},{
|
||||
image: 'https://tnuiimage.tnkjapp.com/shop/pillow.jpg'
|
||||
}, {
|
||||
image: 'https://tnuiimage.tnkjapp.com/shop/pillow2.jpg'
|
||||
}, {
|
||||
image: 'https://tnuiimage.tnkjapp.com/shop/cup1.jpg'
|
||||
}, {
|
||||
image: 'https://tnuiimage.tnkjapp.com/shop/bag2.jpg'
|
||||
}],
|
||||
content: [
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 999,
|
||||
commentCount: 999,
|
||||
likeCount: 999
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
desc: '免费开源可商用组件',
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: 129
|
||||
},
|
||||
collectionCount: 265,
|
||||
commentCount: 22,
|
||||
likeCount: 62
|
||||
},
|
||||
{
|
||||
userAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg',
|
||||
userName: '可我会像',
|
||||
date: '2021年12月20日',
|
||||
label: ['开源','创意'],
|
||||
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: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
.template-wallpaper{
|
||||
}
|
||||
/* 自定义导航栏内容 start */
|
||||
.custom-nav {
|
||||
height: 100%;
|
||||
|
||||
&__back {
|
||||
margin: auto 5rpx;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 30rpx;
|
||||
flex-basis: 5%;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex-basis: 70%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 10rpx 0;
|
||||
margin: 0 30rpx;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
padding-right: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 自定义导航栏内容 end */
|
||||
|
||||
/*logo start */
|
||||
.logo-image{
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
position: relative;
|
||||
}
|
||||
.logo-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* 图标容器12 start */
|
||||
.tn-three{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 50%;
|
||||
bottom: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-38rpx, -16rpx) rotateX(30deg) rotateY(20deg) rotateZ(-30deg);
|
||||
text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.icon12 {
|
||||
&__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: 100rpx;
|
||||
height: 100rpx;
|
||||
font-size: 60rpx;
|
||||
border-radius: 50%;
|
||||
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_bg.png);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 文章内容 start*/
|
||||
.tn-blogger-content {
|
||||
&__wrap {
|
||||
margin: 30rpx;
|
||||
}
|
||||
|
||||
&__info {
|
||||
&__btn {
|
||||
margin-right: -12rpx;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
&__item {
|
||||
line-height: 45rpx;
|
||||
padding: 0 20rpx;
|
||||
margin: 5rpx 18rpx 0 0;
|
||||
|
||||
&--prefix {
|
||||
color: #00FFC8;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__desc {
|
||||
line-height: 55rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
border-radius: 16rpx;
|
||||
|
||||
&--1 {
|
||||
max-width: 690rpx;
|
||||
min-width: 690rpx;
|
||||
max-height: 400rpx;
|
||||
min-height: 400rpx;
|
||||
}
|
||||
|
||||
&--2 {
|
||||
max-width: 260rpx;
|
||||
max-height: 260rpx;
|
||||
}
|
||||
|
||||
&--3 {
|
||||
height: 212rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__count-icon {
|
||||
font-size: 40rpx;
|
||||
padding-right: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.image-wallpaper{
|
||||
padding: 160rpx 0rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
.image-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
/* 文章内容 end*/
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #080808;
|
||||
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>
|
||||
@@ -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.$tn.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.$tn.number.random(0.22 * width, 0.33 * width),
|
||||
y: this.$tn.number.random(0.5 * height, 0.75 * height)
|
||||
}
|
||||
const p2 = {
|
||||
x: this.$tn.number.random(0, 0.88 * width),
|
||||
y: this.$tn.number.random(0.25 * height, 0.5 * height)
|
||||
}
|
||||
const p3 = {
|
||||
x: this.$tn.number.random(0, 0.88 * width),
|
||||
y: this.$tn.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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,625 @@
|
||||
<template>
|
||||
<view class="template-candle">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<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="wrapper">
|
||||
<view class="candles">
|
||||
<view class="light__wave"></view>
|
||||
<view class="candle1">
|
||||
<view class="candle1__body">
|
||||
<view class="candle1__eyes">
|
||||
<view class="candle1__eyes-one"></view>
|
||||
<view class="candle1__eyes-two"></view>
|
||||
</view>
|
||||
<view class="candle1__mouth"></view>
|
||||
</view>
|
||||
<view class="candle1__stick"></view>
|
||||
</view>
|
||||
<view class="candle2">
|
||||
<view class="candle2__body">
|
||||
<view class="candle2__eyes">
|
||||
<view class="candle2__eyes-one"></view>
|
||||
<view class="candle2__eyes-two"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="candle2__stick"></view>
|
||||
</view>
|
||||
<view class="candle2__fire"></view>
|
||||
<view class="sparkles-one"></view>
|
||||
<view class="sparkles-two"></view>
|
||||
<view class="candle__smoke-one">
|
||||
</view>
|
||||
<view class="candle__smoke-two">
|
||||
</view>
|
||||
</view>
|
||||
<view class="floor">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="text-shine tn-flex tn-flex-row-center tn-text-xxl tn-text-bold" style="margin-top: 60vh;overflow-y: hidden;">
|
||||
敬请期待
|
||||
</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: 'TemplateCandle',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 蜡烛 start*/
|
||||
.template-candle{
|
||||
}
|
||||
.wrapper {
|
||||
background: red;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: scale(1.5, 1.5) translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.floor {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 350px;
|
||||
height: 5px;
|
||||
background: #673C63;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: 0px 2px 5px #111;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.candles {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
transform: translate(-50%, -100%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.candle1 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 35px;
|
||||
height: 100px;
|
||||
background: #fff;
|
||||
border: 3px solid #673C63;
|
||||
border-bottom: 0px;
|
||||
border-radius: 3px;
|
||||
transform-origin: center right;
|
||||
transform: translate(60%, -25%);
|
||||
box-shadow: -2px 0px 0px #95c6f2 inset;
|
||||
animation: expand-body 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle1__stick, .candle2__stick {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
width: 3px;
|
||||
height: 15px;
|
||||
background: #673C63;
|
||||
border-radius: 8px;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
|
||||
.candle2__stick {
|
||||
height: 12px;
|
||||
transform-origin: bottom center;
|
||||
animation: stick-animation 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle1__eyes, .candle2__eyes {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
width: 35px;
|
||||
height: 30px;
|
||||
transform: translate(-50%, 0%);
|
||||
}
|
||||
|
||||
.candle1__eyes-one {
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 20%;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 100%;
|
||||
background: #673C63;
|
||||
transform: translate(-70%, 0%);
|
||||
animation: blink-eyes 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle1__eyes-two {
|
||||
position: absolute;
|
||||
left: 70%;
|
||||
top: 20%;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 100%;
|
||||
background: #673C63;
|
||||
transform: translate(-70%, 0%);
|
||||
animation: blink-eyes 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle1__mouth {
|
||||
position: absolute;
|
||||
left: 40%;
|
||||
top: 20%;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border-radius: 20px;
|
||||
background: #673C63;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: uff 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle__smoke-one {
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 50%;
|
||||
width: 30px;
|
||||
height: 3px;
|
||||
background: grey;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: move-left 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle__smoke-two {
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 40%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 10px;
|
||||
background: grey;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: move-top 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle2 {
|
||||
position: absolute;
|
||||
left: 20%;
|
||||
top: 65%;
|
||||
width: 47px;
|
||||
height: 60px;
|
||||
background: #fff;
|
||||
border: 3px solid #673C63;
|
||||
border-bottom: 0px;
|
||||
border-radius: 3px;
|
||||
transform: translate(60%, -15%);
|
||||
transform-origin: center right;
|
||||
box-shadow: -2px 0px 0px #95c6f2 inset;
|
||||
animation: shake-left 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle2__eyes-one {
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 50%;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
display: inline-block;
|
||||
border: 0px solid #673C63;
|
||||
border-radius: 100%;
|
||||
float: left;
|
||||
background: #673C63;
|
||||
transform: translate(-80%, 0%);
|
||||
animation: changeto-lower 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle2__eyes-two {
|
||||
position: absolute;
|
||||
left: 70%;
|
||||
top: 50%;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
display: inline-block;
|
||||
border: 0px solid #673C63;
|
||||
border-radius: 100%;
|
||||
float: left;
|
||||
background: #673C63;
|
||||
transform: translate(-80%, 0%);
|
||||
animation: changeto-greater 3s infinite linear;
|
||||
}
|
||||
|
||||
.light__wave {
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: 35%;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border-radius: 100%;
|
||||
z-index: 0;
|
||||
transform: translate(-25%, -50%) scale(2.5, 2.5);
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
animation: expand-light 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle2__fire {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 20px;
|
||||
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
|
||||
background: #FF9800;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: dance-fire 3s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes blink-eyes {
|
||||
0%,35% {
|
||||
opacity: 1;
|
||||
transform: translate(-70%, 0%);
|
||||
}
|
||||
36%,39% {
|
||||
opacity: 0;
|
||||
transform: translate(-70%, 0%);
|
||||
}
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: translate(-70%, 0%);
|
||||
}
|
||||
50%,65% {
|
||||
transform: translate(-140%, 0%);
|
||||
}
|
||||
66% {
|
||||
transform: translate(-70%, 0%);
|
||||
}
|
||||
}
|
||||
@keyframes expand-body {
|
||||
0%,40% {
|
||||
transform: scale(1, 1) translate(60%, -25%);
|
||||
}
|
||||
45%,55% {
|
||||
transform: scale(1.1, 1.1) translate(60%, -28%);
|
||||
}
|
||||
60% {
|
||||
transform: scale(0.89, 0.89) translate(60%, -25%);
|
||||
}
|
||||
65% {
|
||||
transform: scale(1, 1) translate(60%, -25%);
|
||||
}
|
||||
70% {
|
||||
transform: scale(0.95, 0.95) translate(60%, -25%);
|
||||
}
|
||||
75% {
|
||||
transform: scale(1, 1) translate(60%, -25%);
|
||||
}
|
||||
}
|
||||
@keyframes uff {
|
||||
0%,40% {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
50%,54% {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
left: 30%;
|
||||
}
|
||||
59% {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
left: 20%;
|
||||
}
|
||||
62% {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
left: 20%;
|
||||
}
|
||||
67% {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
left: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes move-left {
|
||||
0%,59%,100% {
|
||||
width: 0px;
|
||||
left: 40%;
|
||||
}
|
||||
60% {
|
||||
width: 30px;
|
||||
left: 30%;
|
||||
}
|
||||
68% {
|
||||
width: 0px;
|
||||
left: 20%;
|
||||
}
|
||||
}
|
||||
@keyframes move-top {
|
||||
0%,64%,100% {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
top: 0%;
|
||||
}
|
||||
65% {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 40%;
|
||||
left: 40%;
|
||||
}
|
||||
80% {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
top: 20%;
|
||||
}
|
||||
}
|
||||
@keyframes shake-left {
|
||||
0%,40% {
|
||||
left: 20%;
|
||||
transform: translate(60%, -15%);
|
||||
}
|
||||
50%,54% {
|
||||
left: 20%;
|
||||
transform: translate(60%, -15%);
|
||||
}
|
||||
59% {
|
||||
left: 20%;
|
||||
transform: translate(60%, -15%);
|
||||
}
|
||||
62% {
|
||||
left: 18%;
|
||||
transform: translate(60%, -15%);
|
||||
}
|
||||
65% {
|
||||
left: 21%;
|
||||
transform: translate(60%, -15%);
|
||||
}
|
||||
67% {
|
||||
left: 20%;
|
||||
transform: translate(60%, -15%);
|
||||
}
|
||||
75% {
|
||||
left: 20%;
|
||||
transform: scale(1.15, 0.85) translate(60%, -15%);
|
||||
background: #fff;
|
||||
border-color: #673C63;
|
||||
}
|
||||
91% {
|
||||
left: 20%;
|
||||
transform: scale(1.18, 0.82) translate(60%, -10%);
|
||||
background: #F44336;
|
||||
border-color: #F44336;
|
||||
box-shadow: -2px 0px 0px #F44336 inset;
|
||||
}
|
||||
92% {
|
||||
left: 20%;
|
||||
transform: scale(0.85, 1.15) translate(60%, -15%);
|
||||
}
|
||||
95% {
|
||||
left: 20%;
|
||||
transform: scale(1.05, 0.95) translate(60%, -15%);
|
||||
}
|
||||
97% {
|
||||
left: 20%;
|
||||
transform: scale(1, 1) translate(60%, -15%);
|
||||
}
|
||||
}
|
||||
@keyframes stick-animation {
|
||||
0%,40% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
50%,54% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
59% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
62% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: rotateZ(-15deg) translate(-50%, -100%);
|
||||
}
|
||||
65% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: rotateZ(15deg) translate(-50%, -100%);
|
||||
}
|
||||
70% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: rotateZ(-5deg) translate(-50%, -100%);
|
||||
}
|
||||
72% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: rotateZ(5deg) translate(-50%, -100%);
|
||||
}
|
||||
74%,84% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: rotateZ(0deg) translate(-50%, -100%);
|
||||
}
|
||||
85% {
|
||||
transform: rotateZ(180deg) translate(0%, 120%);
|
||||
}
|
||||
92% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
}
|
||||
@keyframes expand-light {
|
||||
10%,29%,59%,89% {
|
||||
transform: translate(-25%, -50%) scale(0, 0);
|
||||
border: 2px solid rgba(255, 255, 255, 0);
|
||||
}
|
||||
90%,20%,50% {
|
||||
transform: translate(-25%, -50%) scale(1, 1);
|
||||
}
|
||||
95%,96%,26%,27%,56%,57% {
|
||||
transform: translate(-25%, -50%) scale(2, 2);
|
||||
border: 2px solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
0%,28%,58%,100% {
|
||||
transform: translate(-25%, -50%) scale(2.5, 2.5);
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
@keyframes dance-fire {
|
||||
59%,89% {
|
||||
left: 40%;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
90%,0%,7%,15%,23%,31%,39%,47%,55% {
|
||||
left: 40.8%;
|
||||
width: 16px;
|
||||
height: 20px;
|
||||
background: #FFC107;
|
||||
}
|
||||
94%,3%,11%,19%,27%,35%,43%,51%,58% {
|
||||
left: 41.2%;
|
||||
width: 16px;
|
||||
height: 20px;
|
||||
background: #FF9800;
|
||||
}
|
||||
}
|
||||
@keyframes changeto-lower {
|
||||
0%,70%,90% {
|
||||
padding: 0px;
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
background: #673C63;
|
||||
border-width: 0 0 0 0;
|
||||
border: 0px solid #673C63;
|
||||
transform: translate(-90%, 0%);
|
||||
}
|
||||
71%,89% {
|
||||
background: none;
|
||||
border: solid #673C63;
|
||||
border-radius: 0px;
|
||||
border-width: 0 2px 2px 0;
|
||||
display: inline-block;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
transform-origin: bottom left;
|
||||
transform: rotate(-45deg) translate(-50%, -65%);
|
||||
-webkit-transform: rotate(-45deg) translate(-50%, -65%);
|
||||
}
|
||||
}
|
||||
@keyframes changeto-greater {
|
||||
0%,70%,90% {
|
||||
top: 50%;
|
||||
padding: 0px;
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
background: #673C63;
|
||||
border-width: 0 0 0 0;
|
||||
border: 0px solid #673C63;
|
||||
transform: translate(-80%, 0%);
|
||||
}
|
||||
71%,89% {
|
||||
top: 30%;
|
||||
background: none;
|
||||
border: solid #673C63;
|
||||
border-radius: 0px;
|
||||
border-width: 0 2px 2px 0;
|
||||
display: inline-block;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
transform-origin: bottom left;
|
||||
transform: rotate(135deg) translate(-80%, 20%);
|
||||
-webkit-transform: rotate(135deg) translate(-80%, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
/*敬请期待 start*/
|
||||
.text-shine {
|
||||
background: linear-gradient(to right, #080808 0, #fff 10%, #080808 20%);
|
||||
background-position: 0;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: shine 4s infinite linear;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-text-size-adjust: none;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@-moz-keyframes shine {
|
||||
0% {
|
||||
background-position: 0;
|
||||
}
|
||||
60% {
|
||||
background-position: 280px;
|
||||
}
|
||||
100% {
|
||||
background-position: 280px;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes shine {
|
||||
0% {
|
||||
background-position: 0;
|
||||
}
|
||||
60% {
|
||||
background-position: 280px;
|
||||
}
|
||||
100% {
|
||||
background-position: 280px;
|
||||
}
|
||||
}
|
||||
@-o-keyframes shine {
|
||||
0% {
|
||||
background-position: 0;
|
||||
}
|
||||
60% {
|
||||
background-position: 280px;
|
||||
}
|
||||
100% {
|
||||
background-position: 280px;
|
||||
}
|
||||
}
|
||||
@keyframes shine {
|
||||
0% {
|
||||
background-position: 0;
|
||||
}
|
||||
60% {
|
||||
background-position: 280px;
|
||||
}
|
||||
100% {
|
||||
background-position: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<web-view src="https://support.weixin.qq.com/cgi-bin/mmsupport-bin/showredpacket?receiveuri=dfvH6iYFZGS&check_type=2#wechat_redirect"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<web-view src="https://www.tuniaokj.com/cube/index.html"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<view class="components-pano">
|
||||
<!-- <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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,303 @@
|
||||
<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="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view class="tn-bdhook-shadow" style="border-radius: 10rpx;overflow: hidden;margin: 50rpx 30rpx 30rpx 30rpx;">
|
||||
<view class="tn-flex tn-flex-row-between tn-padding tn-text-center tn-color-white" style="background: linear-gradient(-120deg, #3E445A, #31374A, #2B3042, #262B3C);">
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-text-bold tn-text-lg">
|
||||
开源项目
|
||||
</view>
|
||||
<view class="tn-text-sm">
|
||||
不喜勿喷
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-text-bold tn-text-lg">
|
||||
普通用户
|
||||
</view>
|
||||
<view class="tn-text-sm">
|
||||
免费开源
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-text-bold tn-text-lg">
|
||||
至尊VIP
|
||||
</view>
|
||||
<view class="tn-text-sm">
|
||||
会员福利
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-strip-bottom-min tn-padding-sm" v-for="(item, index) in setList" :key="index" @click="tn(item.url)">
|
||||
<view class="tn-flex-1 tn-text-center">
|
||||
<view class="">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
<!-- <view class="tn-color-gray tn-text-xs">
|
||||
{{ item.title2 }}
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="tn-flex-1">
|
||||
<view class="">
|
||||
{{ item.common }}
|
||||
</view>
|
||||
<view class="">
|
||||
{{ item.common2 }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1">
|
||||
<view class="">
|
||||
{{ item.vip }}
|
||||
</view>
|
||||
<view class="">
|
||||
{{ item.vip2 }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="tn-text-center tn-margin tn-text-lg plus-box" style="padding-top: 60rpx;">
|
||||
<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">开源希望能得到理解</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">期待你的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.tuniaokj.com/）</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 {
|
||||
setList: [
|
||||
{
|
||||
title: "图鸟UI",
|
||||
title2: "UI组件",
|
||||
common: "免费商用",
|
||||
common2: "插件市场获取",
|
||||
vip: "免费商用",
|
||||
vip2: "会员群直接获取"
|
||||
},
|
||||
{
|
||||
title: "图鸟VUE3 ",
|
||||
title2: "UI组件",
|
||||
common: "免费商用",
|
||||
common2: "插件市场获取",
|
||||
vip: "免费商用",
|
||||
vip2: "会员群直接获取"
|
||||
},
|
||||
{
|
||||
title: "圈子博客",
|
||||
title2: "纯前端模板",
|
||||
common: "免费商用",
|
||||
common2: "插件市场获取",
|
||||
vip: "免费商用",
|
||||
vip2: "会员群直接获取"
|
||||
},
|
||||
{
|
||||
title: "简约商圈",
|
||||
title2: "纯前端模板",
|
||||
common: "免费商用",
|
||||
common2: "插件市场获取",
|
||||
vip: "免费商用",
|
||||
vip2: "会员群直接获取"
|
||||
},
|
||||
{
|
||||
title: "凶姐壁纸",
|
||||
title2: "纯前端模板",
|
||||
common: "免费商用",
|
||||
common2: "插件市场获取",
|
||||
vip: "免费商用",
|
||||
vip2: "会员群直接获取"
|
||||
},
|
||||
{
|
||||
title: "无名小程序",
|
||||
title2: "前后端项目",
|
||||
common: "无",
|
||||
common2: "",
|
||||
vip: "会员专属",
|
||||
vip2: "前后端开发ing"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 复制地址
|
||||
copyYuque() {
|
||||
uni.setClipboardData({
|
||||
data: "https://www.tuniaokj.com/",
|
||||
})
|
||||
},
|
||||
// 复制微信号
|
||||
copyWechat() {
|
||||
uni.setClipboardData({
|
||||
data: "tnkewo",
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
|
||||
/* 间隔线 start*/
|
||||
.tn-strip-bottom-min {
|
||||
width: 100%;
|
||||
border-bottom: 1rpx solid #F8F9FB;
|
||||
}
|
||||
|
||||
.tn-strip-bottom {
|
||||
width: 100%;
|
||||
border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
|
||||
}
|
||||
/* 间隔线 end*/
|
||||
|
||||
/* 页面阴影 start*/
|
||||
.tn-bdhook-shadow {
|
||||
border-radius: 15rpx;
|
||||
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
/* 内容 开始 */
|
||||
.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>
|
||||
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<web-view src="https://mp.weixin.qq.com/s/1apBuGcPQXMfz2osv5wwiQ"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- <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';
|
||||
.bottom-backgroup {
|
||||
height: 700rpx;
|
||||
z-index: -1;
|
||||
|
||||
.backgroud-image {
|
||||
border-radius: 60rpx 60rpx 0 0;
|
||||
width: 100%;
|
||||
height: 4100rpx;
|
||||
}
|
||||
} */
|
||||
</style>
|
||||
@@ -0,0 +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.$tn.message.loading('正在获取验证码')
|
||||
setTimeout(() => {
|
||||
this.$tn.message.closeLoading()
|
||||
this.$tn.message.toast('验证码已经发送')
|
||||
// 通知组件开始计时
|
||||
this.$refs.code.start()
|
||||
}, 2000)
|
||||
} else {
|
||||
this.$tn.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>
|
||||
@@ -0,0 +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.$tn.message.loading('正在获取验证码')
|
||||
setTimeout(() => {
|
||||
this.$tn.message.closeLoading()
|
||||
this.$tn.message.toast('验证码已经发送')
|
||||
// 通知组件开始计时
|
||||
this.$refs.code.start()
|
||||
}, 2000)
|
||||
} else {
|
||||
this.$tn.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>
|
||||
@@ -0,0 +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.$tn.message.loading('正在获取验证码')
|
||||
setTimeout(() => {
|
||||
this.$tn.message.closeLoading()
|
||||
this.$tn.message.toast('验证码已经发送')
|
||||
// 通知组件开始计时
|
||||
this.$refs.code.start()
|
||||
}, 2000)
|
||||
} else {
|
||||
this.$tn.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>
|
||||
@@ -0,0 +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.$tn.message.loading('正在获取验证码')
|
||||
setTimeout(() => {
|
||||
this.$tn.message.closeLoading()
|
||||
this.$tn.message.toast('验证码已经发送')
|
||||
// 通知组件开始计时
|
||||
this.$refs.code.start()
|
||||
}, 2000)
|
||||
} else {
|
||||
this.$tn.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>
|
||||
@@ -0,0 +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="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>
|
||||
@@ -0,0 +1,803 @@
|
||||
<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/my/my-bg2.png' mode='widthFix' class='backgroud-image'></image>
|
||||
</view>
|
||||
|
||||
|
||||
<button @click="navTuniaoHome">
|
||||
<view class="dong">
|
||||
<view class="monster">
|
||||
<view class="monster__face">
|
||||
<view class="monster__eye avatar-eye avatar-eye--green eye--left">
|
||||
<view class="avatar-eye-pupil pupil--green"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
|
||||
</view>
|
||||
<view class="monster__eye avatar-eye avatar-eye--violet eye--right">
|
||||
<view class="avatar-eye-pupil pupil--pink"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
|
||||
</view>
|
||||
<view class="monster__noses">
|
||||
<view class="monster__nose"></view>
|
||||
<view class="monster__nose"></view>
|
||||
</view>
|
||||
<view class="monster__mouth">
|
||||
<view class="monster__top"></view>
|
||||
<view class="monster__bottom"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<view class="about__wrap">
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
|
||||
<view class="justify-content-item">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<!-- 图标logo -->
|
||||
<view class="logo-pic tn-shadow" >
|
||||
<view class="logo-image">
|
||||
<view class="tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg');width: 120rpx;height: 120rpx;background-size: cover;">
|
||||
</view>
|
||||
<!-- <view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);"></view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-right tn-color-white">
|
||||
<view class="tn-padding-right tn-padding-left-sm tn-text-xxl">
|
||||
图鸟小伙伴
|
||||
</view>
|
||||
<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">欢迎访问图鸟UI</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 方式7 start-->
|
||||
<view class="tn-flex tn-padding-top-xl" style="margin-top: -20rpx;">
|
||||
<view class="tn-flex-1 my-shadow tn-margin-right-sm tn-bg-white" style="padding: 30rpx 0;">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/my/my17.png' mode='aspectFit'></image>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<view class="tn-text-ellipsis tn-color-gray--dark">插件市场地址</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 my-shadow tn-margin-left-sm tn-bg-white" style="padding: 30rpx 0;">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/my/my14.png' mode='aspectFit'></image>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<view class="tn-text-ellipsis tn-color-gray--dark">Gitee地址</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 方式7 end-->
|
||||
|
||||
|
||||
<!-- 更多信息-->
|
||||
<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-2',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 跳转到
|
||||
navTuniaoHome(e) {
|
||||
wx.vibrateLong();
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</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 */
|
||||
|
||||
/* 用户头像 start */
|
||||
.logo-image{
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
position: relative;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.logo-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 页面 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: -230rpx;
|
||||
}
|
||||
}
|
||||
/* 页面 end*/
|
||||
|
||||
.my-shadow{
|
||||
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
/* 图标容器7 start */
|
||||
.icon7 {
|
||||
&__item {
|
||||
width: 30%;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
padding: 10rpx;
|
||||
margin: 20rpx 10rpx;
|
||||
transform: scale(1);
|
||||
transition: transform 0.3s linear;
|
||||
transform-origin: center center;
|
||||
|
||||
&--icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
font-size: 60rpx;
|
||||
border-radius: 0;
|
||||
margin-bottom: 18rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 图标容器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;
|
||||
}
|
||||
|
||||
|
||||
/* 大嘴鸟*/
|
||||
.dong {
|
||||
z-index: 9999;
|
||||
position: fixed;
|
||||
top: -40px;
|
||||
right: -80px;
|
||||
transform: scale(0.24);
|
||||
-webkit-transform: scale(0.24);
|
||||
-moz-transform: scale(0.24);
|
||||
|
||||
}
|
||||
|
||||
.monster {
|
||||
transform: rotate(-50deg);
|
||||
-ms-transform: rotate(-50deg);
|
||||
/* IE 9 */
|
||||
-moz-transform: rotate(-50deg);
|
||||
/* Firefox */
|
||||
-webkit-transform: rotate(-50deg);
|
||||
/* Safari 和 Chrome */
|
||||
-o-transform: rotate(-50deg);
|
||||
/* Opera */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 170px;
|
||||
height: 400px;
|
||||
border-top-left-radius: 200px;
|
||||
border-top-right-radius: 200px;
|
||||
background-color: #3C47D7;
|
||||
box-shadow: 20px 20px 60px #4650E5;
|
||||
}
|
||||
|
||||
.monster__face {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 14%;
|
||||
width: 75%;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.monster__noses {
|
||||
top: 50%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 28%;
|
||||
height: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.monster__nose {
|
||||
width: 8px;
|
||||
height: 12px;
|
||||
border-radius: 20px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.monster__mouth {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0%;
|
||||
overflow: hidden;
|
||||
border: 25px solid #FFC333;
|
||||
border-radius: 100px;
|
||||
background-color: #810332;
|
||||
animation: mouth 1.75s infinite;
|
||||
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.monster__mouth::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
height: 80px;
|
||||
border-radius: 100px;
|
||||
background-color: #400018;
|
||||
}
|
||||
|
||||
.monster__mouth::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -80px;
|
||||
width: 160px;
|
||||
height: 80px;
|
||||
border-top-left-radius: 50%;
|
||||
border-top-right-radius: 50%;
|
||||
background-color: #DC1B50;
|
||||
animation: tongue 1.75s infinite;
|
||||
}
|
||||
|
||||
.monster__top {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
width: 170px;
|
||||
height: 30px;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
background-color: #ffffff;
|
||||
z-index: 100;
|
||||
animation: t 1.75s infinite;
|
||||
}
|
||||
|
||||
.monster__bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
background-color: #ffffff;
|
||||
z-index: 100;
|
||||
animation: b 1.75s infinite;
|
||||
}
|
||||
|
||||
|
||||
.avatar-eye {
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
background: linear-gradient(105deg, white, #cb87f4);
|
||||
border-radius: 100%;
|
||||
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
|
||||
margin: 3px;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
|
||||
.avatar-eye--green {
|
||||
background: linear-gradient(to bottom, #fdfdfd, #c3efea);
|
||||
}
|
||||
|
||||
.avatar-eye--violet {
|
||||
background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
|
||||
}
|
||||
|
||||
|
||||
.eye--left {
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.eye--right {
|
||||
left: 85%;
|
||||
}
|
||||
|
||||
.eye--center {
|
||||
left: 45%;
|
||||
top: 10%;
|
||||
}
|
||||
|
||||
.avatar-eye-pupil {
|
||||
position: absolute;
|
||||
width: 55%;
|
||||
height: 55%;
|
||||
left: 50%;
|
||||
top: 25%;
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
z-index: 100;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
|
||||
.pupil--green {
|
||||
background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
|
||||
}
|
||||
|
||||
.pupil--pink {
|
||||
background: linear-gradient(135deg, #f1a183, #8535cd);
|
||||
}
|
||||
|
||||
|
||||
.avatar-eye-pupil-blackThing {
|
||||
position: absolute;
|
||||
width: 55%;
|
||||
height: 55%;
|
||||
left: 50%;
|
||||
top: 25%;
|
||||
background: #2c2f32;
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
border-radius: 100%;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.avatar-eye-pupil-lightReflection {
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
left: 25%;
|
||||
top: 10%;
|
||||
background: #ebebeb;
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
border-radius: 100%;
|
||||
box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**/
|
||||
@keyframes t {
|
||||
|
||||
0%,
|
||||
10%,
|
||||
80%,
|
||||
100% {
|
||||
top: -30px;
|
||||
}
|
||||
|
||||
20% {
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
30% {
|
||||
top: -20px;
|
||||
}
|
||||
|
||||
40% {
|
||||
top: -0px;
|
||||
}
|
||||
|
||||
50% {
|
||||
top: -25px;
|
||||
}
|
||||
|
||||
70% {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes b {
|
||||
|
||||
0%,
|
||||
10%,
|
||||
80%,
|
||||
100% {
|
||||
bottom: -30px;
|
||||
}
|
||||
|
||||
20% {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
30% {
|
||||
bottom: -20px;
|
||||
}
|
||||
|
||||
40% {
|
||||
bottom: -0px;
|
||||
}
|
||||
|
||||
50% {
|
||||
bottom: -25px;
|
||||
}
|
||||
|
||||
70% {
|
||||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mouth {
|
||||
|
||||
0%,
|
||||
10%,
|
||||
100% {
|
||||
width: 100%;
|
||||
height: 0%;
|
||||
}
|
||||
|
||||
15% {
|
||||
width: 90%;
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
20% {
|
||||
width: 50%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
25% {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
30% {
|
||||
width: 80%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
35% {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
40% {
|
||||
width: 55%;
|
||||
height: 75%;
|
||||
}
|
||||
|
||||
45% {
|
||||
width: 50%;
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
50% {
|
||||
width: 40%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
55% {
|
||||
width: 70%;
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
60% {
|
||||
width: 40%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
65% {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
70% {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
75% {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
80% {
|
||||
width: 50%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
85% {
|
||||
width: 90%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
85% {
|
||||
width: 40%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
90% {
|
||||
width: 90%;
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
95% {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tongue {
|
||||
|
||||
0%,
|
||||
20%,
|
||||
100% {
|
||||
bottom: -80px;
|
||||
}
|
||||
|
||||
30%,
|
||||
90% {
|
||||
bottom: -40px;
|
||||
}
|
||||
|
||||
40% {
|
||||
bottom: -45px;
|
||||
}
|
||||
|
||||
50% {
|
||||
bottom: -50px;
|
||||
}
|
||||
|
||||
70% {
|
||||
bottom: -80px;
|
||||
}
|
||||
|
||||
90% {
|
||||
bottom: -40px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,957 @@
|
||||
<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/my/my-bg3.png' mode='widthFix' class='backgroud-image'></image>
|
||||
</view>
|
||||
|
||||
|
||||
<button @click="navTuniaoHome">
|
||||
<view class="dong">
|
||||
<view class="monster">
|
||||
<view class="monster__face">
|
||||
<view class="monster__eye avatar-eye avatar-eye--green eye--left">
|
||||
<view class="avatar-eye-pupil pupil--green"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
|
||||
</view>
|
||||
<view class="monster__eye avatar-eye avatar-eye--violet eye--right">
|
||||
<view class="avatar-eye-pupil pupil--pink"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
|
||||
</view>
|
||||
<view class="monster__noses">
|
||||
<view class="monster__nose"></view>
|
||||
<view class="monster__nose"></view>
|
||||
</view>
|
||||
<view class="monster__mouth">
|
||||
<view class="monster__top"></view>
|
||||
<view class="monster__bottom"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<view class="about__wrap">
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
|
||||
<view class="justify-content-item">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<!-- 图标logo -->
|
||||
<view class="logo-pic tn-shadow" >
|
||||
<view class="logo-image">
|
||||
<view class="tn-shadow-blur" style="background-image:url('https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg');width: 120rpx;height: 120rpx;background-size: cover;">
|
||||
</view>
|
||||
<!-- <view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);"></view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-right tn-color-white">
|
||||
<view class="tn-padding-right tn-padding-left-sm tn-text-xxl">
|
||||
图鸟小伙伴
|
||||
</view>
|
||||
<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">亲爱的会员你好吖</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 更多信息-->
|
||||
<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm tn-color-black tn-bg-white">
|
||||
<!-- 方式12 start-->
|
||||
<view class="tn-flex tn-flex-row-center tn-radius">
|
||||
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<view class="tn-icon-vip"></view>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<text class="tn-text-ellipsis">我的订单</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<view class="tn-icon-money"></view>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<text class="tn-text-ellipsis">余额充值</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<view class="tn-icon-ticket"></view>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<text class="tn-text-ellipsis">消费明细</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<view class="tn-icon-lucky-money"></view>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<text class="tn-text-ellipsis">红包卡券</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-row-center tn-radius">
|
||||
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<view class="tn-icon-shop"></view>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<text class="tn-text-ellipsis">积分商城</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<view class="tn-icon-order"></view>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<text class="tn-text-ellipsis">积分订单</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<view class="tn-icon-star"></view>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<text class="tn-text-ellipsis">店铺收藏</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||
<view class="tn-icon-map"></view>
|
||||
</view>
|
||||
<view class="tn-text-center">
|
||||
<text class="tn-text-ellipsis">收货地址</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 方式12 end-->
|
||||
</view>
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-padding-top-xl">
|
||||
<view class="justify-content-item tn-text-bold tn-text-lg">
|
||||
<text class="">更多功能</text>
|
||||
</view>
|
||||
<view class="justify-content-item tn-text-df">
|
||||
<text class="tn-padding-xs">全部</text>
|
||||
<text class="tn-icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 更多信息-->
|
||||
<view class="about-shadow tn-margin-top tn-padding-top-sm tn-padding-bottom-sm">
|
||||
<tn-scroll-list :indicatorWidth="100" :indicatorBarWidth="30" indicatorColor="#FFE2D9" indicatorActiveColor="#FF7043">
|
||||
<view class="tn-flex tn-margin-left-sm tn-margin-right-sm tn-margin-top">
|
||||
<block v-for="(item, index) in historyData" :key="index">
|
||||
<view class="tn-flex-1 tn-padding-sm tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon11__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
|
||||
<view :class="[`tn-icon-${item.icon}`]"></view>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-df tn-text-center tn-margin-top-sm">
|
||||
<text class="tn-text-ellipsis" >{{ item.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</tn-scroll-list>
|
||||
</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-3',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {
|
||||
historyData: [
|
||||
{
|
||||
title: '分销中心',
|
||||
icon: 'organizatio',
|
||||
color: 'orange',
|
||||
},
|
||||
{
|
||||
title: '积分商城',
|
||||
icon: 'level',
|
||||
color: 'purple',
|
||||
},
|
||||
{
|
||||
title: '限时秒杀',
|
||||
icon: 'clock',
|
||||
color: 'blue',
|
||||
},
|
||||
{
|
||||
title: '社区团购',
|
||||
icon: 'team',
|
||||
color: 'purplered',
|
||||
},
|
||||
{
|
||||
title: '大转盘',
|
||||
icon: 'group-circle',
|
||||
color: 'teal',
|
||||
},
|
||||
{
|
||||
title: '商品核销',
|
||||
icon: 'scan',
|
||||
color: 'orangered',
|
||||
},
|
||||
{
|
||||
title: '满减优惠',
|
||||
icon: 'coupon',
|
||||
color: 'indigo',
|
||||
},
|
||||
{
|
||||
title: '视频直播',
|
||||
icon: 'video',
|
||||
color: 'green',
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 跳转到
|
||||
navTuniaoHome(e) {
|
||||
wx.vibrateLong();
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</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 */
|
||||
|
||||
/* 用户头像 start */
|
||||
.logo-image{
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
position: relative;
|
||||
}
|
||||
.logo-pic{
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
// background-attachment:fixed;
|
||||
background-position:top;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* 页面 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: -230rpx;
|
||||
}
|
||||
}
|
||||
/* 页面 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;
|
||||
}
|
||||
|
||||
/* 图标容器12 start */
|
||||
.icon12 {
|
||||
&__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: 100rpx;
|
||||
height: 100rpx;
|
||||
font-size: 60rpx;
|
||||
// border-radius: 50%;
|
||||
margin-bottom: 0rpx;
|
||||
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);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 图标容器11 start */
|
||||
.icon11 {
|
||||
&__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: 100rpx;
|
||||
height: 100rpx;
|
||||
font-size: 60rpx;
|
||||
border-radius: 50%;
|
||||
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_bg.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 大嘴鸟*/
|
||||
.dong {
|
||||
z-index: 9999;
|
||||
position: fixed;
|
||||
top: -40px;
|
||||
right: -80px;
|
||||
transform: scale(0.24);
|
||||
-webkit-transform: scale(0.24);
|
||||
-moz-transform: scale(0.24);
|
||||
|
||||
}
|
||||
|
||||
.monster {
|
||||
transform: rotate(-50deg);
|
||||
-ms-transform: rotate(-50deg);
|
||||
/* IE 9 */
|
||||
-moz-transform: rotate(-50deg);
|
||||
/* Firefox */
|
||||
-webkit-transform: rotate(-50deg);
|
||||
/* Safari 和 Chrome */
|
||||
-o-transform: rotate(-50deg);
|
||||
/* Opera */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 170px;
|
||||
height: 400px;
|
||||
border-top-left-radius: 200px;
|
||||
border-top-right-radius: 200px;
|
||||
background-color: #3C47D7;
|
||||
box-shadow: 20px 20px 60px #4650E5;
|
||||
}
|
||||
|
||||
.monster__face {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 14%;
|
||||
width: 75%;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.monster__noses {
|
||||
top: 50%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 28%;
|
||||
height: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.monster__nose {
|
||||
width: 8px;
|
||||
height: 12px;
|
||||
border-radius: 20px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.monster__mouth {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0%;
|
||||
overflow: hidden;
|
||||
border: 25px solid #FFC333;
|
||||
border-radius: 100px;
|
||||
background-color: #810332;
|
||||
animation: mouth 1.75s infinite;
|
||||
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.monster__mouth::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
height: 80px;
|
||||
border-radius: 100px;
|
||||
background-color: #400018;
|
||||
}
|
||||
|
||||
.monster__mouth::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -80px;
|
||||
width: 160px;
|
||||
height: 80px;
|
||||
border-top-left-radius: 50%;
|
||||
border-top-right-radius: 50%;
|
||||
background-color: #DC1B50;
|
||||
animation: tongue 1.75s infinite;
|
||||
}
|
||||
|
||||
.monster__top {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
width: 170px;
|
||||
height: 30px;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
background-color: #ffffff;
|
||||
z-index: 100;
|
||||
animation: t 1.75s infinite;
|
||||
}
|
||||
|
||||
.monster__bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
background-color: #ffffff;
|
||||
z-index: 100;
|
||||
animation: b 1.75s infinite;
|
||||
}
|
||||
|
||||
|
||||
.avatar-eye {
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
background: linear-gradient(105deg, white, #cb87f4);
|
||||
border-radius: 100%;
|
||||
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
|
||||
margin: 3px;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
|
||||
.avatar-eye--green {
|
||||
background: linear-gradient(to bottom, #fdfdfd, #c3efea);
|
||||
}
|
||||
|
||||
.avatar-eye--violet {
|
||||
background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
|
||||
}
|
||||
|
||||
|
||||
.eye--left {
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.eye--right {
|
||||
left: 85%;
|
||||
}
|
||||
|
||||
.eye--center {
|
||||
left: 45%;
|
||||
top: 10%;
|
||||
}
|
||||
|
||||
.avatar-eye-pupil {
|
||||
position: absolute;
|
||||
width: 55%;
|
||||
height: 55%;
|
||||
left: 50%;
|
||||
top: 25%;
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
z-index: 100;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
|
||||
.pupil--green {
|
||||
background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
|
||||
}
|
||||
|
||||
.pupil--pink {
|
||||
background: linear-gradient(135deg, #f1a183, #8535cd);
|
||||
}
|
||||
|
||||
|
||||
.avatar-eye-pupil-blackThing {
|
||||
position: absolute;
|
||||
width: 55%;
|
||||
height: 55%;
|
||||
left: 50%;
|
||||
top: 25%;
|
||||
background: #2c2f32;
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
border-radius: 100%;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.avatar-eye-pupil-lightReflection {
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
left: 25%;
|
||||
top: 10%;
|
||||
background: #ebebeb;
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
border-radius: 100%;
|
||||
box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**/
|
||||
@keyframes t {
|
||||
|
||||
0%,
|
||||
10%,
|
||||
80%,
|
||||
100% {
|
||||
top: -30px;
|
||||
}
|
||||
|
||||
20% {
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
30% {
|
||||
top: -20px;
|
||||
}
|
||||
|
||||
40% {
|
||||
top: -0px;
|
||||
}
|
||||
|
||||
50% {
|
||||
top: -25px;
|
||||
}
|
||||
|
||||
70% {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes b {
|
||||
|
||||
0%,
|
||||
10%,
|
||||
80%,
|
||||
100% {
|
||||
bottom: -30px;
|
||||
}
|
||||
|
||||
20% {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
30% {
|
||||
bottom: -20px;
|
||||
}
|
||||
|
||||
40% {
|
||||
bottom: -0px;
|
||||
}
|
||||
|
||||
50% {
|
||||
bottom: -25px;
|
||||
}
|
||||
|
||||
70% {
|
||||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mouth {
|
||||
|
||||
0%,
|
||||
10%,
|
||||
100% {
|
||||
width: 100%;
|
||||
height: 0%;
|
||||
}
|
||||
|
||||
15% {
|
||||
width: 90%;
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
20% {
|
||||
width: 50%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
25% {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
30% {
|
||||
width: 80%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
35% {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
40% {
|
||||
width: 55%;
|
||||
height: 75%;
|
||||
}
|
||||
|
||||
45% {
|
||||
width: 50%;
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
50% {
|
||||
width: 40%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
55% {
|
||||
width: 70%;
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
60% {
|
||||
width: 40%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
65% {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
70% {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
75% {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
80% {
|
||||
width: 50%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
85% {
|
||||
width: 90%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
85% {
|
||||
width: 40%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
90% {
|
||||
width: 90%;
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
95% {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tongue {
|
||||
|
||||
0%,
|
||||
20%,
|
||||
100% {
|
||||
bottom: -80px;
|
||||
}
|
||||
|
||||
30%,
|
||||
90% {
|
||||
bottom: -40px;
|
||||
}
|
||||
|
||||
40% {
|
||||
bottom: -45px;
|
||||
}
|
||||
|
||||
50% {
|
||||
bottom: -50px;
|
||||
}
|
||||
|
||||
70% {
|
||||
bottom: -80px;
|
||||
}
|
||||
|
||||
90% {
|
||||
bottom: -40px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,874 @@
|
||||
<template>
|
||||
<view class="template-clock">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<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="clock">
|
||||
<view class="clock__hand clock__hand--hr"></view>
|
||||
<view class="clock__hand clock__hand--min"></view>
|
||||
<view class="clock__hand clock__hand--sec"></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateClock',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
.template-clock{
|
||||
// background: linear-gradient(#e3e4e8, #abafba);
|
||||
}
|
||||
/* 时钟 start*/
|
||||
|
||||
/* * {
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
*/
|
||||
/* :root {
|
||||
--bg: linear-gradient(#e3e4e8, #abafba);
|
||||
|
||||
font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
|
||||
} */
|
||||
|
||||
/* body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font: 1em/1.5 sans-serif;
|
||||
height: 100vh;
|
||||
min-height: 480px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
} */
|
||||
|
||||
.clock {
|
||||
margin: 20% auto;
|
||||
box-shadow: 0 -1em 1em rgba(0, 0, 0, 0.3) inset, 0 0.5em 1em rgba(255, 255, 255, 0.1) inset, 0 -0.5em 1em rgba(255, 255, 255, 0.2), 0 1em 1em rgba(0, 0, 0, 0.3);
|
||||
position: relative;
|
||||
width: 16em;
|
||||
height: 16em;
|
||||
}
|
||||
.clock, .clock:before, .clock:after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.clock:before, .clock:after, .clock__hand {
|
||||
position: absolute;
|
||||
}
|
||||
.clock:before, .clock:after {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
.clock:before {
|
||||
box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, 0.1) inset, 0 -0.5em 1em 0.5em rgba(0, 0, 0, 0.1);
|
||||
top: 2.5em;
|
||||
left: 2.5em;
|
||||
width: 11em;
|
||||
height: 11em;
|
||||
}
|
||||
.clock:after {
|
||||
box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.3) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.3);
|
||||
top: calc(50% - 0.5em);
|
||||
left: calc(50% - 0.5em);
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.clock__hand {
|
||||
box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
bottom: 50%;
|
||||
transform-origin: 50% 100%;
|
||||
transform: rotate(0) translateY(-1.25em);
|
||||
}
|
||||
.clock__hand--hr {
|
||||
animation: shortHand 86400s linear infinite;
|
||||
background: #255ff4;;
|
||||
border-radius: 0.5em;
|
||||
left: calc(50% - 0.5em);
|
||||
width: 1em;
|
||||
height: 3.2em;
|
||||
}
|
||||
.clock__hand--min {
|
||||
animation: longHand 3600s linear infinite;
|
||||
background: #5583f6;
|
||||
border-radius: 0.4em;
|
||||
left: calc(50% - 0.4em);
|
||||
width: 0.8em;
|
||||
height: 3.6em;
|
||||
}
|
||||
.clock__hand--sec {
|
||||
animation: longHand 60s cubic-bezier(0.8, 0, 0.2, 1) infinite;
|
||||
background: #17181c;
|
||||
border-radius: 0.3em;
|
||||
left: calc(50% - 0.3em);
|
||||
width: 0.6em;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
/* Dark theme */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
|
||||
.clock {
|
||||
box-shadow: 0 -1em 1em rgba(0, 0, 0, 0.3) inset, 0 0.5em 1em rgba(255, 255, 255, 0.05) inset, 0 -0.5em 1em rgba(255, 255, 255, 0.05), 0 1em 1em rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.clock:before {
|
||||
box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, 0.2) inset, 0 -0.5em 1em 0.5em rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.clock:after {
|
||||
box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
/* Animations */
|
||||
@keyframes shortHand {
|
||||
0% {
|
||||
box-shadow: 0em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em 1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(0deg) translateY(-1.25em);
|
||||
}
|
||||
0.83% {
|
||||
box-shadow: 0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em 0.99em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(6deg) translateY(-1.25em);
|
||||
}
|
||||
1.67% {
|
||||
box-shadow: 0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(12deg) translateY(-1.25em);
|
||||
}
|
||||
2.5% {
|
||||
box-shadow: 0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(18deg) translateY(-1.25em);
|
||||
}
|
||||
3.33% {
|
||||
box-shadow: 0.04em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(24deg) translateY(-1.25em);
|
||||
}
|
||||
4.17% {
|
||||
box-shadow: 0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em 0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(30deg) translateY(-1.25em);
|
||||
}
|
||||
5% {
|
||||
box-shadow: 0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(36deg) translateY(-1.25em);
|
||||
}
|
||||
5.83% {
|
||||
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(42deg) translateY(-1.25em);
|
||||
}
|
||||
6.67% {
|
||||
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em 0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(48deg) translateY(-1.25em);
|
||||
}
|
||||
7.5% {
|
||||
box-shadow: 0.08em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(54deg) translateY(-1.25em);
|
||||
}
|
||||
8.33% {
|
||||
box-shadow: 0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(60deg) translateY(-1.25em);
|
||||
}
|
||||
9.17% {
|
||||
box-shadow: 0.09em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em 0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(66deg) translateY(-1.25em);
|
||||
}
|
||||
10% {
|
||||
box-shadow: 0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em 0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(72deg) translateY(-1.25em);
|
||||
}
|
||||
10.83% {
|
||||
box-shadow: 0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(78deg) translateY(-1.25em);
|
||||
}
|
||||
11.67% {
|
||||
box-shadow: 0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em 0.1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(84deg) translateY(-1.25em);
|
||||
}
|
||||
12.5% {
|
||||
box-shadow: 0.1em 0em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 1em 0em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(90deg) translateY(-1.25em);
|
||||
}
|
||||
13.33% {
|
||||
box-shadow: 0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em -0.11em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(96deg) translateY(-1.25em);
|
||||
}
|
||||
14.17% {
|
||||
box-shadow: 0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(102deg) translateY(-1.25em);
|
||||
}
|
||||
15% {
|
||||
box-shadow: 0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em -0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(108deg) translateY(-1.25em);
|
||||
}
|
||||
15.83% {
|
||||
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em -0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(114deg) translateY(-1.25em);
|
||||
}
|
||||
16.67% {
|
||||
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em -0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(120deg) translateY(-1.25em);
|
||||
}
|
||||
17.5% {
|
||||
box-shadow: 0.08em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(126deg) translateY(-1.25em);
|
||||
}
|
||||
18.33% {
|
||||
box-shadow: 0.07em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em -0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(132deg) translateY(-1.25em);
|
||||
}
|
||||
19.17% {
|
||||
box-shadow: 0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(138deg) translateY(-1.25em);
|
||||
}
|
||||
20% {
|
||||
box-shadow: 0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(144deg) translateY(-1.25em);
|
||||
}
|
||||
20.83% {
|
||||
box-shadow: 0.05em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em -0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(150deg) translateY(-1.25em);
|
||||
}
|
||||
21.67% {
|
||||
box-shadow: 0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(156deg) translateY(-1.25em);
|
||||
}
|
||||
22.5% {
|
||||
box-shadow: 0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(162deg) translateY(-1.25em);
|
||||
}
|
||||
23.33% {
|
||||
box-shadow: 0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(168deg) translateY(-1.25em);
|
||||
}
|
||||
24.17% {
|
||||
box-shadow: 0.01em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(174deg) translateY(-1.25em);
|
||||
}
|
||||
25% {
|
||||
box-shadow: 0em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(180deg) translateY(-1.25em);
|
||||
}
|
||||
25.83% {
|
||||
box-shadow: -0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(186deg) translateY(-1.25em);
|
||||
}
|
||||
26.67% {
|
||||
box-shadow: -0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(192deg) translateY(-1.25em);
|
||||
}
|
||||
27.5% {
|
||||
box-shadow: -0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(198deg) translateY(-1.25em);
|
||||
}
|
||||
28.33% {
|
||||
box-shadow: -0.05em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(204deg) translateY(-1.25em);
|
||||
}
|
||||
29.17% {
|
||||
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em -0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(210deg) translateY(-1.25em);
|
||||
}
|
||||
30% {
|
||||
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(216deg) translateY(-1.25em);
|
||||
}
|
||||
30.83% {
|
||||
box-shadow: -0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(222deg) translateY(-1.25em);
|
||||
}
|
||||
31.67% {
|
||||
box-shadow: -0.08em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em -0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(228deg) translateY(-1.25em);
|
||||
}
|
||||
32.5% {
|
||||
box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(234deg) translateY(-1.25em);
|
||||
}
|
||||
33.33% {
|
||||
box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em -0.51em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(240deg) translateY(-1.25em);
|
||||
}
|
||||
34.17% {
|
||||
box-shadow: -0.1em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em -0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(246deg) translateY(-1.25em);
|
||||
}
|
||||
35% {
|
||||
box-shadow: -0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em -0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(252deg) translateY(-1.25em);
|
||||
}
|
||||
35.83% {
|
||||
box-shadow: -0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(258deg) translateY(-1.25em);
|
||||
}
|
||||
36.67% {
|
||||
box-shadow: -0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.11em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(264deg) translateY(-1.25em);
|
||||
}
|
||||
37.5% {
|
||||
box-shadow: -0.1em -0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.01em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(270deg) translateY(-1.25em);
|
||||
}
|
||||
38.33% {
|
||||
box-shadow: -0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -1em 0.1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(276deg) translateY(-1.25em);
|
||||
}
|
||||
39.17% {
|
||||
box-shadow: -0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(282deg) translateY(-1.25em);
|
||||
}
|
||||
40% {
|
||||
box-shadow: -0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em 0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(288deg) translateY(-1.25em);
|
||||
}
|
||||
40.83% {
|
||||
box-shadow: -0.1em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em 0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(294deg) translateY(-1.25em);
|
||||
}
|
||||
41.67% {
|
||||
box-shadow: -0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(300deg) translateY(-1.25em);
|
||||
}
|
||||
42.5% {
|
||||
box-shadow: -0.09em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(306deg) translateY(-1.25em);
|
||||
}
|
||||
43.33% {
|
||||
box-shadow: -0.08em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em 0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(312deg) translateY(-1.25em);
|
||||
}
|
||||
44.17% {
|
||||
box-shadow: -0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(318deg) translateY(-1.25em);
|
||||
}
|
||||
45% {
|
||||
box-shadow: -0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(324deg) translateY(-1.25em);
|
||||
}
|
||||
45.83% {
|
||||
box-shadow: -0.06em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em 0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(330deg) translateY(-1.25em);
|
||||
}
|
||||
46.67% {
|
||||
box-shadow: -0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(336deg) translateY(-1.25em);
|
||||
}
|
||||
47.5% {
|
||||
box-shadow: -0.04em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(342deg) translateY(-1.25em);
|
||||
}
|
||||
48.33% {
|
||||
box-shadow: -0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(348deg) translateY(-1.25em);
|
||||
}
|
||||
49.17% {
|
||||
box-shadow: -0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em 0.99em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(354deg) translateY(-1.25em);
|
||||
}
|
||||
50% {
|
||||
box-shadow: -0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.01em 1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(360deg) translateY(-1.25em);
|
||||
}
|
||||
50.83% {
|
||||
box-shadow: 0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em 0.99em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(366deg) translateY(-1.25em);
|
||||
}
|
||||
51.67% {
|
||||
box-shadow: 0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(372deg) translateY(-1.25em);
|
||||
}
|
||||
52.5% {
|
||||
box-shadow: 0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(378deg) translateY(-1.25em);
|
||||
}
|
||||
53.33% {
|
||||
box-shadow: 0.04em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(384deg) translateY(-1.25em);
|
||||
}
|
||||
54.17% {
|
||||
box-shadow: 0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em 0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(390deg) translateY(-1.25em);
|
||||
}
|
||||
55% {
|
||||
box-shadow: 0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(396deg) translateY(-1.25em);
|
||||
}
|
||||
55.83% {
|
||||
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(402deg) translateY(-1.25em);
|
||||
}
|
||||
56.67% {
|
||||
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em 0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(408deg) translateY(-1.25em);
|
||||
}
|
||||
57.5% {
|
||||
box-shadow: 0.08em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(414deg) translateY(-1.25em);
|
||||
}
|
||||
58.33% {
|
||||
box-shadow: 0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(420deg) translateY(-1.25em);
|
||||
}
|
||||
59.17% {
|
||||
box-shadow: 0.09em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em 0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(426deg) translateY(-1.25em);
|
||||
}
|
||||
60% {
|
||||
box-shadow: 0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em 0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(432deg) translateY(-1.25em);
|
||||
}
|
||||
60.83% {
|
||||
box-shadow: 0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(438deg) translateY(-1.25em);
|
||||
}
|
||||
61.67% {
|
||||
box-shadow: 0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em 0.1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(444deg) translateY(-1.25em);
|
||||
}
|
||||
62.5% {
|
||||
box-shadow: 0.1em 0em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 1em 0em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(450deg) translateY(-1.25em);
|
||||
}
|
||||
63.33% {
|
||||
box-shadow: 0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em -0.11em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(456deg) translateY(-1.25em);
|
||||
}
|
||||
64.17% {
|
||||
box-shadow: 0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(462deg) translateY(-1.25em);
|
||||
}
|
||||
65% {
|
||||
box-shadow: 0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em -0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(468deg) translateY(-1.25em);
|
||||
}
|
||||
65.83% {
|
||||
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em -0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(474deg) translateY(-1.25em);
|
||||
}
|
||||
66.67% {
|
||||
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em -0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(480deg) translateY(-1.25em);
|
||||
}
|
||||
67.5% {
|
||||
box-shadow: 0.08em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(486deg) translateY(-1.25em);
|
||||
}
|
||||
68.33% {
|
||||
box-shadow: 0.07em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em -0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(492deg) translateY(-1.25em);
|
||||
}
|
||||
69.17% {
|
||||
box-shadow: 0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(498deg) translateY(-1.25em);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(504deg) translateY(-1.25em);
|
||||
}
|
||||
70.83% {
|
||||
box-shadow: 0.05em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em -0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(510deg) translateY(-1.25em);
|
||||
}
|
||||
71.67% {
|
||||
box-shadow: 0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(516deg) translateY(-1.25em);
|
||||
}
|
||||
72.5% {
|
||||
box-shadow: 0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(522deg) translateY(-1.25em);
|
||||
}
|
||||
73.33% {
|
||||
box-shadow: 0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(528deg) translateY(-1.25em);
|
||||
}
|
||||
74.17% {
|
||||
box-shadow: 0.01em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(534deg) translateY(-1.25em);
|
||||
}
|
||||
75% {
|
||||
box-shadow: 0em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(540deg) translateY(-1.25em);
|
||||
}
|
||||
75.83% {
|
||||
box-shadow: -0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(546deg) translateY(-1.25em);
|
||||
}
|
||||
76.67% {
|
||||
box-shadow: -0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(552deg) translateY(-1.25em);
|
||||
}
|
||||
77.5% {
|
||||
box-shadow: -0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(558deg) translateY(-1.25em);
|
||||
}
|
||||
78.33% {
|
||||
box-shadow: -0.05em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(564deg) translateY(-1.25em);
|
||||
}
|
||||
79.17% {
|
||||
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em -0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(570deg) translateY(-1.25em);
|
||||
}
|
||||
80% {
|
||||
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(576deg) translateY(-1.25em);
|
||||
}
|
||||
80.83% {
|
||||
box-shadow: -0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(582deg) translateY(-1.25em);
|
||||
}
|
||||
81.67% {
|
||||
box-shadow: -0.08em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em -0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(588deg) translateY(-1.25em);
|
||||
}
|
||||
82.5% {
|
||||
box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(594deg) translateY(-1.25em);
|
||||
}
|
||||
83.33% {
|
||||
box-shadow: -0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em -0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(600deg) translateY(-1.25em);
|
||||
}
|
||||
84.17% {
|
||||
box-shadow: -0.1em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em -0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(606deg) translateY(-1.25em);
|
||||
}
|
||||
85% {
|
||||
box-shadow: -0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em -0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(612deg) translateY(-1.25em);
|
||||
}
|
||||
85.83% {
|
||||
box-shadow: -0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(618deg) translateY(-1.25em);
|
||||
}
|
||||
86.67% {
|
||||
box-shadow: -0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.11em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(624deg) translateY(-1.25em);
|
||||
}
|
||||
87.5% {
|
||||
box-shadow: -0.1em -0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.01em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(630deg) translateY(-1.25em);
|
||||
}
|
||||
88.33% {
|
||||
box-shadow: -0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -1em 0.1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(636deg) translateY(-1.25em);
|
||||
}
|
||||
89.17% {
|
||||
box-shadow: -0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(642deg) translateY(-1.25em);
|
||||
}
|
||||
90% {
|
||||
box-shadow: -0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em 0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(648deg) translateY(-1.25em);
|
||||
}
|
||||
90.83% {
|
||||
box-shadow: -0.1em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em 0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(654deg) translateY(-1.25em);
|
||||
}
|
||||
91.67% {
|
||||
box-shadow: -0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(660deg) translateY(-1.25em);
|
||||
}
|
||||
92.5% {
|
||||
box-shadow: -0.09em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(666deg) translateY(-1.25em);
|
||||
}
|
||||
93.33% {
|
||||
box-shadow: -0.08em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em 0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(672deg) translateY(-1.25em);
|
||||
}
|
||||
94.17% {
|
||||
box-shadow: -0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(678deg) translateY(-1.25em);
|
||||
}
|
||||
95% {
|
||||
box-shadow: -0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(684deg) translateY(-1.25em);
|
||||
}
|
||||
95.83% {
|
||||
box-shadow: -0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.5em 0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(690deg) translateY(-1.25em);
|
||||
}
|
||||
96.67% {
|
||||
box-shadow: -0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(696deg) translateY(-1.25em);
|
||||
}
|
||||
97.5% {
|
||||
box-shadow: -0.04em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(702deg) translateY(-1.25em);
|
||||
}
|
||||
98.33% {
|
||||
box-shadow: -0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(708deg) translateY(-1.25em);
|
||||
}
|
||||
99.17% {
|
||||
box-shadow: -0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em 0.99em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(714deg) translateY(-1.25em);
|
||||
}
|
||||
100% {
|
||||
box-shadow: -0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.01em 1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(720deg) translateY(-1.25em);
|
||||
}
|
||||
}
|
||||
@keyframes longHand {
|
||||
0% {
|
||||
box-shadow: 0em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em 1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(0deg) translateY(-1.25em);
|
||||
}
|
||||
1.67% {
|
||||
box-shadow: 0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em 0.99em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(6deg) translateY(-1.25em);
|
||||
}
|
||||
3.33% {
|
||||
box-shadow: 0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(12deg) translateY(-1.25em);
|
||||
}
|
||||
5% {
|
||||
box-shadow: 0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(18deg) translateY(-1.25em);
|
||||
}
|
||||
6.67% {
|
||||
box-shadow: 0.04em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(24deg) translateY(-1.25em);
|
||||
}
|
||||
8.33% {
|
||||
box-shadow: 0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em 0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(30deg) translateY(-1.25em);
|
||||
}
|
||||
10% {
|
||||
box-shadow: 0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(36deg) translateY(-1.25em);
|
||||
}
|
||||
11.67% {
|
||||
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(42deg) translateY(-1.25em);
|
||||
}
|
||||
13.33% {
|
||||
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em 0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(48deg) translateY(-1.25em);
|
||||
}
|
||||
15% {
|
||||
box-shadow: 0.08em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(54deg) translateY(-1.25em);
|
||||
}
|
||||
16.67% {
|
||||
box-shadow: 0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(60deg) translateY(-1.25em);
|
||||
}
|
||||
18.33% {
|
||||
box-shadow: 0.09em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em 0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(66deg) translateY(-1.25em);
|
||||
}
|
||||
20% {
|
||||
box-shadow: 0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em 0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(72deg) translateY(-1.25em);
|
||||
}
|
||||
21.67% {
|
||||
box-shadow: 0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(78deg) translateY(-1.25em);
|
||||
}
|
||||
23.33% {
|
||||
box-shadow: 0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em 0.1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(84deg) translateY(-1.25em);
|
||||
}
|
||||
25% {
|
||||
box-shadow: 0.1em 0em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 1em 0em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(90deg) translateY(-1.25em);
|
||||
}
|
||||
26.67% {
|
||||
box-shadow: 0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em -0.11em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(96deg) translateY(-1.25em);
|
||||
}
|
||||
28.33% {
|
||||
box-shadow: 0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(102deg) translateY(-1.25em);
|
||||
}
|
||||
30% {
|
||||
box-shadow: 0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em -0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(108deg) translateY(-1.25em);
|
||||
}
|
||||
31.67% {
|
||||
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em -0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(114deg) translateY(-1.25em);
|
||||
}
|
||||
33.33% {
|
||||
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em -0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(120deg) translateY(-1.25em);
|
||||
}
|
||||
35% {
|
||||
box-shadow: 0.08em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(126deg) translateY(-1.25em);
|
||||
}
|
||||
36.67% {
|
||||
box-shadow: 0.07em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em -0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(132deg) translateY(-1.25em);
|
||||
}
|
||||
38.33% {
|
||||
box-shadow: 0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(138deg) translateY(-1.25em);
|
||||
}
|
||||
40% {
|
||||
box-shadow: 0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(144deg) translateY(-1.25em);
|
||||
}
|
||||
41.67% {
|
||||
box-shadow: 0.05em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em -0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(150deg) translateY(-1.25em);
|
||||
}
|
||||
43.33% {
|
||||
box-shadow: 0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(156deg) translateY(-1.25em);
|
||||
}
|
||||
45% {
|
||||
box-shadow: 0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(162deg) translateY(-1.25em);
|
||||
}
|
||||
46.67% {
|
||||
box-shadow: 0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(168deg) translateY(-1.25em);
|
||||
}
|
||||
48.33% {
|
||||
box-shadow: 0.01em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(174deg) translateY(-1.25em);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(180deg) translateY(-1.25em);
|
||||
}
|
||||
51.67% {
|
||||
box-shadow: -0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(186deg) translateY(-1.25em);
|
||||
}
|
||||
53.33% {
|
||||
box-shadow: -0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(192deg) translateY(-1.25em);
|
||||
}
|
||||
55% {
|
||||
box-shadow: -0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(198deg) translateY(-1.25em);
|
||||
}
|
||||
56.67% {
|
||||
box-shadow: -0.05em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(204deg) translateY(-1.25em);
|
||||
}
|
||||
58.33% {
|
||||
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em -0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(210deg) translateY(-1.25em);
|
||||
}
|
||||
60% {
|
||||
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(216deg) translateY(-1.25em);
|
||||
}
|
||||
61.67% {
|
||||
box-shadow: -0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(222deg) translateY(-1.25em);
|
||||
}
|
||||
63.33% {
|
||||
box-shadow: -0.08em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em -0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(228deg) translateY(-1.25em);
|
||||
}
|
||||
65% {
|
||||
box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(234deg) translateY(-1.25em);
|
||||
}
|
||||
66.67% {
|
||||
box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em -0.51em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(240deg) translateY(-1.25em);
|
||||
}
|
||||
68.33% {
|
||||
box-shadow: -0.1em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em -0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(246deg) translateY(-1.25em);
|
||||
}
|
||||
70% {
|
||||
box-shadow: -0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em -0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(252deg) translateY(-1.25em);
|
||||
}
|
||||
71.67% {
|
||||
box-shadow: -0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(258deg) translateY(-1.25em);
|
||||
}
|
||||
73.33% {
|
||||
box-shadow: -0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.11em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(264deg) translateY(-1.25em);
|
||||
}
|
||||
75% {
|
||||
box-shadow: -0.1em -0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.01em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(270deg) translateY(-1.25em);
|
||||
}
|
||||
76.67% {
|
||||
box-shadow: -0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -1em 0.1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(276deg) translateY(-1.25em);
|
||||
}
|
||||
78.33% {
|
||||
box-shadow: -0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(282deg) translateY(-1.25em);
|
||||
}
|
||||
80% {
|
||||
box-shadow: -0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em 0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(288deg) translateY(-1.25em);
|
||||
}
|
||||
81.67% {
|
||||
box-shadow: -0.1em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em 0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(294deg) translateY(-1.25em);
|
||||
}
|
||||
83.33% {
|
||||
box-shadow: -0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(300deg) translateY(-1.25em);
|
||||
}
|
||||
85% {
|
||||
box-shadow: -0.09em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(306deg) translateY(-1.25em);
|
||||
}
|
||||
86.67% {
|
||||
box-shadow: -0.08em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em 0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(312deg) translateY(-1.25em);
|
||||
}
|
||||
88.33% {
|
||||
box-shadow: -0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(318deg) translateY(-1.25em);
|
||||
}
|
||||
90% {
|
||||
box-shadow: -0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(324deg) translateY(-1.25em);
|
||||
}
|
||||
91.67% {
|
||||
box-shadow: -0.06em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em 0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(330deg) translateY(-1.25em);
|
||||
}
|
||||
93.33% {
|
||||
box-shadow: -0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(336deg) translateY(-1.25em);
|
||||
}
|
||||
95% {
|
||||
box-shadow: -0.04em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(342deg) translateY(-1.25em);
|
||||
}
|
||||
96.67% {
|
||||
box-shadow: -0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(348deg) translateY(-1.25em);
|
||||
}
|
||||
98.33% {
|
||||
box-shadow: -0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em 0.99em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(354deg) translateY(-1.25em);
|
||||
}
|
||||
100% {
|
||||
box-shadow: -0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.01em 1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(360deg) translateY(-1.25em);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user