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

图鸟UI V1.0.0 版本提交

Browse Source
This commit is contained in:
JaylenTech
2021-12-29 11:14:34 +08:00
commit cb0af8c384
203 changed files with 44944 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
templatePage/animate/hollow/hollow.vue Normal file
View File

@@ -0,0 +1,148 @@
<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>
<open-data type="userNickName"></open-data>
</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>

265
templatePage/animate/loading/loading.vue Normal file
View File

@@ -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>

149
templatePage/animate/particle/particle.vue Normal file
View File

@@ -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>

264
templatePage/animate/photo/photo.vue Normal file
View File

@@ -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>

519
templatePage/health/qrcode/qrcode.vue Normal file
View File

@@ -0,0 +1,519 @@
<template>
<view class="template-screen">
<!-- 顶部自定义导航 -->
<!-- <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: 0 0 60rpx 0;">
<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"
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>
</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*/
</style>

647
templatePage/home/course/course.vue Normal file
View File

@@ -0,0 +1,647 @@
<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> -->
<!-- 顶部自定义导航 -->
<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 tn-padding-bottom-xl">
<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>
<!-- 回到首页悬浮按钮-->
<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*/
</style>

527
templatePage/home/design/design.vue Normal file
View File

@@ -0,0 +1,527 @@
<template>
<view class="template-design">
<!-- 顶部自定义导航 -->
<!-- <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 tn-margin-bottom">
<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>
<!-- 回到首页悬浮按钮-->
<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{
margin-bottom: calc(110rpx + env(safe-area-inset-bottom) / 2);;
}
/* 图标容器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>

439
templatePage/home/job/job.vue Normal file
View File

@@ -0,0 +1,439 @@
<template>
<view class="template-job">
<!-- 顶部自定义导航 -->
<!-- <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 tn-margin-bottom-xl">
<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="[$t.colorUtils.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-->
<!-- 回到首页悬浮按钮-->
<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';
/* 自定义导航栏内容 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 */
</style>

704
templatePage/home/music/music.vue Normal file
View File

@@ -0,0 +1,704 @@
<template>
<view class="template-music">
<!-- 顶部自定义导航 -->
<!-- <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>
<!-- 回到首页悬浮按钮-->
<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{
margin-bottom: calc(110rpx + env(safe-area-inset-bottom) / 2);;
}
/* 自定义导航栏内容 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>

604
templatePage/home/screen/screen.vue Normal file
View File

@@ -0,0 +1,604 @@
<template>
<view class="template-screen">
<!-- 顶部自定义导航 -->
<!-- <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">
<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>
<!-- 回到首页悬浮按钮-->
<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*/
</style>

534
templatePage/home/wallpaper/wallpaper.vue Normal file
View File

@@ -0,0 +1,534 @@
<template>
<view class="template-wallpaper" 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 tn-padding-bottom">
<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>
<!-- 回到首页悬浮按钮-->
<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';
/* 自定义导航栏内容 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*/
</style>

238
templatePage/life/browser/browser.vue Normal file
View File

@@ -0,0 +1,238 @@
<template>
<view class="template-browser">
<!-- 顶部自定义导航 -->
<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" :indicator-dots="true" :circular="true" :autoplay="false" interval="10000"
duration="500" @change="cardSwiper" indicator-color="#666" indicator-active-color="#000"
style="margin-top: 300rpx;">
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur swiper-item1--active':'swiper-item1'">
<view class="swiper-item image-banner" style="border-radius: 20rpx 20rpx 22rpx 22rpx;">
<image class="" :src="item.url" v-if="item.type=='image'" mode="aspectFill"></image>
</view>
</swiper-item>
</swiper>
<view class="tn-text-center tn-color-black">
测试，未写完
</view>
<!-- 底部tabbar start-->
<view class="tabbar footerfixed">
<view class="action">
<view class="bar-icon">
<view class="tn-icon-home-smile tn-color-black">
</view>
</view>
<view class="tn-color-black">首页</view>
</view>
<view class="action">
<view class="bar-icon">
<view class="tn-icon-discover tn-color-gray--dark">
</view>
</view>
<view class="tn-color-gray--dark">圈子</view>
</view>
<view class="action">
<view class="bar-icon">
<view class="tn-icon-image-text tn-color-gray--dark">
</view>
</view>
<view class="tn-color-gray--dark">案例</view>
</view>
<view class="action">
<view class="bar-icon">
<view class="tn-icon-my tn-color-gray--dark">
<tn-badge :absolute="true">99+</tn-badge>
</view>
</view>
<view class="tn-color-gray--dark">我的</view>
</view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateBrowser',
mixins: [template_page_mixin],
data(){
return {
cardCur: 0,
swiperList: [{
id: 0,
type: 'image',
name: '总有你想不到的创意',
text: '海量分享',
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg4.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d1.png'
}, {
id: 1,
type: 'image',
name: '寻找一起成长的小伙伴',
text: '愉快玩耍',
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg5.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d4.png'
}, {
id: 2,
type: 'image',
name: '更多彩蛋等你探索',
text: '酷炫多彩',
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg4.jpg',
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d5.png'
}],
}
},
methods: {
// cardSwiper
cardSwiper(e) {
this.cardCur = e.detail.current
},
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.template-browser{
margin-bottom: calc(110rpx + env(safe-area-inset-bottom) / 2);;
}
/* 轮播视觉差 start */
.card-swiper {
height: 500rpx !important;
}
.card-swiper swiper-item {
width: 250rpx !important;
left: 250rpx;
box-sizing: border-box;
padding: 100rpx 0rpx 100rpx 0rpx;
overflow: initial;
}
.card-swiper swiper-item .swiper-item {
width: 100%;
display: block;
height: 200rpx;
border-radius: 0rpx;
transform: translate(0rpx, 0rpx) scale(1.5);
transition: all 0.2s ease-in 0s;
overflow: hidden;
border: 5rpx solid red;
}
.card-swiper swiper-item.cur .swiper-item {
transform: translate(0rpx, 0rpx) scale(2);
transition: all 0.2s ease-in 0s;
border: 5rpx solid pink;
}
.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: absolute;
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
.spot{
background-color: #FFF;
opacity: 0.4;
width: 10rpx;
height: 10rpx;
border-radius: 20rpx;
margin: 0 8rpx !important;
left: -270rpx;
top: -180rpx;
position: relative;
}
.spot.active{
opacity: 1;
width: 30rpx;
background-color: #FFF;
}
.swiper-item1 {
z-index: -1;
&--active {
z-index: 10;
}
}
/* 底部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>

159
templatePage/life/fullpage/fullpage.vue Normal file
View File

@@ -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>

150
templatePage/life/plus/plus.vue Normal file
View File

@@ -0,0 +1,150 @@
<template>
<view class="template-plus">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="tn-text-center tn-margin-xl tn-text-lg plus-box" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view class="plus-text">
<view class="tn-text-bold">图鸟UI小程序，免费开源可商用</view>
<view class="tn-margin-bottom-xl">（会员有更多福利鸭）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">图鸟UI Plus会员，初步定价</view>
<view class="tn-text-bold">
<text class="tn-text-xl-xxl">699￥ / </text>
<text class="tn-text-xxl tn-padding-left-sm">终身</text>
</view>
<view class="tn-margin-bottom-xl">（大约等于两个前端页面价格）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">或许会员人数达到100+叭</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="tn-margin-bottom-xl">（毕竟开发圈子就那么小）</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">使用手册 + 图片素材 + 意见反馈 + Bug提交</view>
<view class="tn-margin-bottom-xl">（https://www.yuque.com/tuniao）</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="">（ 图鸟北北，微信号：tnkewo ）</view>
<view class="">（如需入群，可备注：进微信群）</view>
<view class="">（如需合作，可备注：商业合作）</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">待补充....</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">待补充....</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">待补充....</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">待补充....</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">待补充....</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">待补充....</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">待补充....</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">待补充....</view>
</view>
<view class="plus-text">
<view class="tn-text-bold">待补充....</view>
</view>
</view>
<view class="tn-padding-bottom"></view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplatePlus',
mixins: [template_page_mixin],
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* List */
.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;
}
/* List element */
.plus-text {
counter-increment: index;
display: initial;
align-items: center;
padding: 12px 0;
box-sizing: border-box;
}
/* Element counter */
.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>

414
templatePage/login/demo1/demo1.vue Normal file
View File

@@ -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 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-discover-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-blue tn-color-white">
<view class="tn-icon-gloves-fill"></view>
</view>
</view>
</view>
</view>
<!-- 底部背景图片-->
<view class="login__bg login__bg--bottom">
<image src="https://tnuiimage.tnkjapp.com/login/1/login_bottom_bg.jpg" mode="widthFix"></image>
</view>
</view>
<!-- 验证码倒计时 -->
<tn-verification-code
ref="code"
uniqueKey="login-demo-1"
:seconds="60"
@change="codeChange">
</tn-verification-code>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'login-demo-1',
mixins: [template_page_mixin],
data() {
return {
// 当前选中的模式
currentModeIndex: 0,
// 模式选中滑块
modeSliderStyle: {
left: 0
},
// 是否显示密码
showPassword: false,
// 倒计时提示文字
tips: '获取验证码'
}
},
watch: {
currentModeIndex(value) {
const sliderWidth = uni.upx2px(476 / 2)
this.modeSliderStyle.left = `${sliderWidth * value}px`
}
},
methods: {
// 切换模式
modeSwitch(index) {
this.currentModeIndex = index
this.showPassword = false
},
// 获取验证码
getCode() {
if (this.$refs.code.canGetCode) {
this.$t.messageUtils.loading('正在获取验证码')
setTimeout(() => {
this.$t.messageUtils.closeLoading()
this.$t.messageUtils.toast('验证码已经发送')
// 通知组件开始计时
this.$refs.code.start()
}, 2000)
} else {
this.$t.messageUtils.toast(this.$refs.code.secNum + '秒后再重试')
}
},
// 获取验证码倒计时被修改
codeChange(event) {
this.tips = event
}
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 悬浮 */
.rocket-sussuspension{
animation: suspension 3s ease-in-out infinite;
}
@keyframes suspension {
0%, 100% {
transform: translate(0 , 0);
}
50% {
transform: translate(-0.8rem , 1rem);
}
}
.login {
position: relative;
height: 100%;
z-index: 1;
/* 背景图片 start */
&__bg {
z-index: -1;
position: fixed;
&--top {
top: 0;
left: 0;
right: 0;
width: 100%;
.bg {
width: 750rpx;
will-change: transform;
}
.rocket {
margin: 50rpx 28%;
width: 400rpx;
will-change: transform;
}
}
&--bottom {
bottom: -10rpx;
left: 0;
right: 0;
width: 100%;
// height: 144px;
margin-bottom: env(safe-area-inset-bottom);
image {
width: 750rpx;
will-change: transform;
}
}
}
/* 背景图片 end */
/* 内容 start */
&__wrapper {
margin-top: 403rpx;
width: 100%;
}
/* 切换 start */
&__mode {
position: relative;
margin: 0 auto;
width: 476rpx;
height: 77rpx;
background-color: #FFFFFF;
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
border-radius: 39rpx;
&__item {
height: 77rpx;
width: 100%;
line-height: 77rpx;
text-align: center;
font-size: 31rpx;
color: #908f8f;
letter-spacing: 1em;
text-indent: 1em;
z-index: 2;
transition: all 0.4s;
&--active {
font-weight: bold;
color: #FFFFFF;
}
}
&__slider {
position: absolute;
height: inherit;
width: calc(476rpx / 2);
border-radius: inherit;
box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
z-index: 1;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
}
/* 切换 end */
/* 登录注册信息 start */
&__info {
margin: 0 30rpx;
margin-top: 105rpx;
padding: 30rpx 51rpx;
padding-bottom: 0;
border-radius: 20rpx;
background-color: #ffff;
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
&__item {
&__input {
margin-top: 59rpx;
width: 100%;
height: 77rpx;
border: 1rpx solid #E6E6E6;
border-radius: 39rpx;
&__left-icon {
width: 10%;
font-size: 44rpx;
margin-left: 20rpx;
color: #AAAAAA;
}
&__content {
width: 80%;
padding-left: 10rpx;
&--verify-code {
width: 56%;
}
input {
font-size: 24rpx;
// letter-spacing: 0.1em;
}
}
&__right-icon {
width: 10%;
font-size: 44rpx;
margin-right: 20rpx;
color: #AAAAAA;
}
&__right-verify-code {
width: 34%;
margin-right: 20rpx;
}
}
&__button {
margin-top: 75rpx;
margin-bottom: 39rpx;
width: 100%;
height: 77rpx;
text-align: center;
font-size: 31rpx;
font-weight: bold;
line-height: 77rpx;
letter-spacing: 1em;
text-indent: 1em;
border-radius: 39rpx;
box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
}
&__tips {
margin: 30rpx 0;
color: #AAAAAA;
}
}
}
/* 登录注册信息 end */
/* 登录方式切换 start */
&__way {
margin: 0 auto;
margin-top: 110rpx;
&__item {
&--icon {
width: 77rpx;
height: 77rpx;
font-size: 50rpx;
border-radius: 100rpx;
margin-bottom: 18rpx;
position: relative;
z-index: 1;
&::after {
content: " ";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
border-radius: inherit;
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
}
}
}
}
/* 登录方式切换 end */
/* 内容 end */
}
/deep/.input-placeholder {
font-size: 24rpx;
color: #E6E6E6;
}
</style>

495
templatePage/login/demo2/demo2.vue Normal file
View File

@@ -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 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-discover-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-cyan tn-color-white">
<view class="tn-icon-gloves-fill"></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'
const Point = class {
constructor(x, y) {
this.x = x
this.y = y
this.r = 1 + Math.random() * 2
this.sx = Math.random() * 2 - 1
this.sy = Math.random() * 2 - 1
}
draw(ctx) {
ctx.beginPath()
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
ctx.closePath()
ctx.fillStyle = '#fff'
ctx.fill()
}
move(w, h) {
this.x += this.sx
this.y += this.sy
if (this.x > w || this.x < 0) this.sx = -this.sx
if (this.y > h || this.y < 0) this.sy = -this.sy
}
drawLine(ctx, p) {
const dx = this.x - p.x
const dy = this.y - p.y
const d = Math.sqrt(dx * dx + dy * dy)
if (d < 100) {
var alpha = (100 - d) / 300 * 1
ctx.beginPath()
ctx.moveTo(this.x, this.y)
ctx.lineTo(p.x, p.y)
ctx.closePath()
ctx.strokeStyle = 'rgba(255, 255, 255, ' + alpha + ')'
ctx.strokeWidth = 1
ctx.stroke()
}
}
}
const sysinfo = uni.getSystemInfoSync()
const w = 400
const h = 1000
export default {
name: 'login-demo-2',
mixins: [template_page_mixin],
data() {
return {
ctx: null,
screenWidth: sysinfo.screenWidth,
screenHeight: sysinfo.screenHeight,
timer: null,
points: [],
// 当前选中的模式
currentModeIndex: 0,
// 模式选中滑块
modeSliderStyle: {
left: 0
},
// 是否显示密码
showPassword: false,
// 倒计时提示文字
tips: '获取验证码'
}
},
onLoad(options) {
this.from = options.from || ''
for (let i = 0; i < 80; i++) {
this.points.push(new Point(Math.random() * w, Math.random() * h))
}
this.ctx = uni.createCanvasContext('star_canvas')
// console.log(points)
this.gameloop() //进行
// this.ctx.setFillStyle('red')
// this.ctx.fillRect(200, 300, 50, 50)
// this.ctx.draw()
},
onUnload() {
clearTimeout(this.timer)
},
watch: {
currentModeIndex(value) {
const sliderWidth = uni.upx2px(476 / 2)
this.modeSliderStyle.left = `${sliderWidth * value}px`
}
},
methods: {
/**粒子进行*/
gameloop() {
this.timer = setTimeout(this.gameloop, 100);
// console.log('gameloop')
this.paint();
},
/**清空画布*/
paint() {
this.ctx.clearRect(0, 0, w, h)
for (var i = 0; i < this.points.length; i++) {
this.points[i].move(w, h)
this.points[i].draw(this.ctx)
for (var j = i + 1; j < this.points.length; j++) {
this.points[i].drawLine(this.ctx, this.points[j])
}
}
this.ctx.draw();
},
// 切换模式
modeSwitch(index) {
this.currentModeIndex = index
this.showPassword = false
},
// 获取验证码
getCode() {
if (this.$refs.code.canGetCode) {
this.$t.messageUtils.loading('正在获取验证码')
setTimeout(() => {
this.$t.messageUtils.closeLoading()
this.$t.messageUtils.toast('验证码已经发送')
// 通知组件开始计时
this.$refs.code.start()
}, 2000)
} else {
this.$t.messageUtils.toast(this.$refs.code.secNum + '秒后再重试')
}
},
// 获取验证码倒计时被修改
codeChange(event) {
this.tips = event
}
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 粒子背景 start*/
.template-login2 {
background: linear-gradient(90deg, #892FE8, #3D7EFF);
min-height: 100vh
}
// .template-login2:before {
// content: "";
// position: absolute;
// top: 0;
// left: 0;
// bottom: 0;
// right: 0;
// -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
// -webkit-mask-image: linear-gradient(to bottom, transparent, black);
// mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
// mask-image: linear-gradient(to bottom, transparent, black);
// background: -webkit-gradient(linear, left top, right top, from(#E72F8C), to(#892FE8));
// background: linear-gradient(90deg, #E72F8C, #892FE8);
// }
.mycanvas {
position: absolute;
background-size: cover;
width: 100vw;
height: 100vh;
justify-content: center;
flex-direction: column;
color: #fff;
}
.login {
position: relative;
height: 100%;
z-index: 1;
/* 内容 start */
&__wrapper {
padding-top: 400rpx;
width: 100%;
}
/* 切换 start */
&__mode {
position: relative;
margin: 0 auto;
width: 476rpx;
height: 77rpx;
background-color: rgba(255,255,255,0.2);
backdrop-filter: blur(6rpx);
-webkit-backdrop-filter: blur(6rpx);
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
border-radius: 39rpx;
&__item {
height: 77rpx;
width: 100%;
line-height: 77rpx;
text-align: center;
font-size: 31rpx;
color: #FFFFFF;
letter-spacing: 1em;
text-indent: 1em;
z-index: 2;
transition: all 0.4s;
&--active {
font-weight: bold;
color: #FFFFFF;
}
}
&__slider {
position: absolute;
height: inherit;
width: calc(476rpx / 2);
border-radius: inherit;
box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
z-index: 1;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
}
/* 切换 end */
/* 登录注册信息 start */
&__info {
margin: 0 50rpx;
margin-top: 105rpx;
padding: 30rpx 51rpx;
padding-bottom: 0;
border-radius: 20rpx;
background-color: rgba(255,255,255,0.2);
backdrop-filter: blur(6rpx);
-webkit-backdrop-filter: blur(6rpx);
border: 2rpx solid rgba(255, 255, 255, 0.1);
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
&__item {
&__input {
margin-top: 59rpx;
width: 100%;
height: 77rpx;
border: 1rpx solid #FFFFFF;
border-radius: 39rpx;
&__left-icon {
width: 10%;
font-size: 44rpx;
margin-left: 20rpx;
color: #FFFFFF;
}
&__content {
width: 80%;
padding-left: 10rpx;
&--verify-code {
width: 56%;
}
input {
font-size: 24rpx;
color: #FFFFFF;
// letter-spacing: 0.1em;
}
}
&__right-icon {
width: 10%;
font-size: 44rpx;
margin-right: 20rpx;
color: #FFFFFF;
}
&__right-verify-code {
width: 34%;
margin-right: 20rpx;
}
}
&__button {
margin-top: 75rpx;
margin-bottom: 39rpx;
width: 100%;
height: 77rpx;
text-align: center;
font-size: 31rpx;
font-weight: bold;
line-height: 77rpx;
letter-spacing: 1em;
text-indent: 1em;
border-radius: 100rpx;
color: #FFFFFF;
background-color: rgba(255,255,255,0.2);
// border: 2rpx solid #FFFFFF;
}
&__tips {
margin: 30rpx 0;
color: #FFFFFF;
}
}
}
/* 登录注册信息 end */
/* 登录方式切换 start */
&__way {
margin: 0 auto;
margin-top: 110rpx;
&__item {
&--icon {
width: 77rpx;
height: 77rpx;
font-size: 50rpx;
border-radius: 100rpx;
margin-bottom: 18rpx;
position: relative;
z-index: 1;
&::after {
content: " ";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
border-radius: inherit;
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
}
}
}
}
/* 登录方式切换 end */
/* 内容 end */
}
/deep/.input-placeholder {
font-size: 24rpx;
color: #E6E6E6;
}
</style>