mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-06-07 03:53:57 +08:00
kert
485 lines
14 KiB
Vue
485 lines
14 KiB
Vue
<template>
|
||
<view class="template-mimicry">
|
||
<!-- 顶部自定义导航 -->
|
||
<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"
|
||
: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'"></image>
|
||
</view>
|
||
<view class="swiper-item2 image-banner">
|
||
<image :src="item.pngurl" mode="heightFix" v-if="item.type=='image'"></image>
|
||
</view>
|
||
<view class="swiper-item-text">
|
||
<view class="tn-text-xxl tn-text-bold tn-color-white">{{item.name}}</view>
|
||
<view class="tn-text-xl tn-text-bold tn-color-white tn-padding-top-xs">{{item.text}}</view>
|
||
</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 class="keyboard-fixed">
|
||
<view class="keyboard-box">
|
||
<view class="keyboard">
|
||
<view class="key s2 esc">??</view>
|
||
<view class="key">1</view>
|
||
<view class="key">2</view>
|
||
<view class="key">3</view>
|
||
<view class="key">4</view>
|
||
<view class="key">5</view>
|
||
<view class="key">6</view>
|
||
<view class="key">7</view>
|
||
<view class="key">8</view>
|
||
<view class="key">9</view>
|
||
<view class="key">0</view>
|
||
<view class="key sub">-</view>
|
||
<view class="key add">=</view>
|
||
<view class="key s4 back">??</view>
|
||
<view class="key s3 tab">??</view>
|
||
<view class="key">Q</view>
|
||
<view class="key">W</view>
|
||
<view class="key">E</view>
|
||
<view class="key">R</view>
|
||
<view class="key">T</view>
|
||
<view class="key">Y</view>
|
||
<view class="key">U</view>
|
||
<view class="key">I</view>
|
||
<view class="key">O</view>
|
||
<view class="key">P</view>
|
||
<view class="key openbracket">[</view>
|
||
<view class="key closebracket">]</view>
|
||
<view class="key s3 pipe">\</view>
|
||
<view class="key s4 cap">??</view>
|
||
<view class="key">A</view>
|
||
<view class="key">S</view>
|
||
<view class="key">D</view>
|
||
<view class="key dotted">F</view>
|
||
<view class="key">G</view>
|
||
<view class="key">H</view>
|
||
<view class="key dotted">J</view>
|
||
<view class="key">K</view>
|
||
<view class="key">L</view>
|
||
<view class="key semi">;</view>
|
||
<view class="key comma">,</view>
|
||
<view class="key s4 enter">??</view>
|
||
<view class="key s5 shift">??</view>
|
||
<view class="key">Z</view>
|
||
<view class="key">X</view>
|
||
<view class="key">C</view>
|
||
<view class="key">V</view>
|
||
<view class="key">B</view>
|
||
<view class="key">N</view>
|
||
<view class="key">M</view>
|
||
<view class="key openangular">,</view>
|
||
<view class="key closeangular">.</view>
|
||
<view class="key slash">/</view>
|
||
<view class="key s5 shift up">??</view>
|
||
<view class="key s3 control">☕</view>
|
||
<view class="key s3 win">??</view>
|
||
<view class="key s3 alt">⭐️</view>
|
||
<view class="key s12 space"></view>
|
||
<view class="key s3 alt">⭐️</view>
|
||
<view class="key s2 fn left">??</view>
|
||
<view class="key s2 fn down">????</view>
|
||
<view class="key s2 control right">☕</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||
export default {
|
||
name: 'TemplateMimicry',
|
||
mixins: [template_page_mixin],
|
||
data(){
|
||
return {
|
||
cardCur: 0,
|
||
swiperList: [{
|
||
id: 0,
|
||
type: 'image',
|
||
name: '总有你想不到的创意',
|
||
text: '海量分享',
|
||
url: 'https://resource.tuniaokj.com/images/swiper/fullbg4.jpg',
|
||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d1.png'
|
||
}, {
|
||
id: 1,
|
||
type: 'image',
|
||
name: '寻找一起成长的小伙伴',
|
||
text: '愉快玩耍',
|
||
url: 'https://resource.tuniaokj.com/images/swiper/fullbg5.jpg',
|
||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d4.png'
|
||
}, {
|
||
id: 2,
|
||
type: 'image',
|
||
name: '更多彩蛋等你探索',
|
||
text: '酷炫多彩',
|
||
url: 'https://resource.tuniaokj.com/images/swiper/fullbg4.jpg',
|
||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d5.png'
|
||
}, {
|
||
id: 3,
|
||
type: 'image',
|
||
name: '商业合作请联系作者',
|
||
text: '免费开源',
|
||
url: 'https://resource.tuniaokj.com/images/swiper/fullbg5.jpg',
|
||
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d6.png'
|
||
}],
|
||
}
|
||
},
|
||
methods: {
|
||
// cardSwiper
|
||
cardSwiper(e) {
|
||
this.cardCur = e.detail.current
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||
|
||
.template-mimicry{
|
||
background: #d8dee8;
|
||
height: 100vh;
|
||
}
|
||
|
||
.keyboard-fixed{
|
||
position: fixed;
|
||
bottom: 0;
|
||
|
||
}
|
||
|
||
.keyboard-box{
|
||
margin: 0 auto;
|
||
padding: 30rpx 0;
|
||
overflow: hidden;
|
||
display: grid;
|
||
place-items: center;
|
||
// background: radial-gradient(circle at top left, #d8dee8 30%, #c2ccdb);
|
||
}
|
||
|
||
.keyboard {
|
||
display: grid;
|
||
grid-template-columns: repeat(30, 2.3vw);
|
||
grid-template-rows: repeat(5, 3.25vh);
|
||
grid-gap: 0.95vw;
|
||
// background: #c2ccdb;
|
||
padding: 1.73vh 1.73vw;
|
||
// border-radius: 1.27vw;
|
||
// box-shadow: -0.32vw -0.32vw 0.95vw #f3f5f8, 0.32vw 0.32vw 0.63vw #c2ccdb;
|
||
}
|
||
.keyboard .key {
|
||
border-radius: 0.76vw;
|
||
grid-column: auto/span 2;
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 0.475vw;
|
||
font-size: 1.9vw;
|
||
display: grid;
|
||
align-items: center;
|
||
color: #000;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
background: #d8dee8;
|
||
box-shadow: -0.32vw -0.32vw 0.95vw #f3f5f8, 0.32vw 0.32vw 0.63vw #c2ccdb;
|
||
transition: all 100ms cubic-bezier(0.09, 0.32, 0.34, 2);
|
||
user-select: none;
|
||
}
|
||
.keyboard .key:hover,
|
||
.keyboard .key.pressed {
|
||
transform: perspective(300px) scale(0.97);
|
||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #f6f8fa, inset 0.32vw 0.32vw 0.63vw #c2ccdb;
|
||
color: #fff;
|
||
text-shadow: 0 0 10px #f7f9fa, 0 0 15px #f7f9fa, 0 0 20px #f7f9fa;
|
||
}
|
||
.keyboard .key.dotted {
|
||
position: relative;
|
||
}
|
||
.keyboard .key.dotted::before {
|
||
content: '_';
|
||
font-weight: bold;
|
||
color: #b5c0d2;
|
||
position: absolute;
|
||
top: 70%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
.keyboard .key.esc {
|
||
background: #ed4c67;
|
||
color: #fbdbe1;
|
||
}
|
||
.keyboard .key.esc:hover,
|
||
.keyboard .key.esc.pressed {
|
||
transform: perspective(300px) scale(0.97);
|
||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #f38e9f, inset 0.32vw 0.32vw 0.63vw #c71432;
|
||
color: #fff;
|
||
text-shadow: 0 0 10px #f59eac, 0 0 15px #f59eac, 0 0 20px #f59eac;
|
||
}
|
||
.keyboard .key.back {
|
||
background: #d63031;
|
||
color: #f7d6d6;
|
||
}
|
||
.keyboard .key.back:hover,
|
||
.keyboard .key.back.pressed {
|
||
transform: perspective(300px) scale(0.97);
|
||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #e57c7d, inset 0.32vw 0.32vw 0.63vw #991e1f;
|
||
color: #fff;
|
||
text-shadow: 0 0 10px #e88f90, 0 0 15px #e88f90, 0 0 20px #e88f90;
|
||
}
|
||
.keyboard .key.shift {
|
||
background: #1e90ff;
|
||
color: #d2e9ff;
|
||
}
|
||
.keyboard .key.shift:hover,
|
||
.keyboard .key.shift.pressed {
|
||
transform: perspective(300px) scale(0.97);
|
||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #71b9ff, inset 0.32vw 0.32vw 0.63vw #0065c8;
|
||
color: #fff;
|
||
text-shadow: 0 0 10px #85c3ff, 0 0 15px #85c3ff, 0 0 20px #85c3ff;
|
||
}
|
||
.keyboard .key.control {
|
||
background: #be2edd;
|
||
color: #f2d5f8;
|
||
}
|
||
.keyboard .key.control:hover,
|
||
.keyboard .key.control.pressed {
|
||
transform: perspective(300px) scale(0.97);
|
||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #d57be9, inset 0.32vw 0.32vw 0.63vw #891aa1;
|
||
color: #fff;
|
||
text-shadow: 0 0 10px #db8eec, 0 0 15px #db8eec, 0 0 20px #db8eec;
|
||
}
|
||
.keyboard .key.win {
|
||
background: #f7b731;
|
||
color: #fdf1d6;
|
||
}
|
||
.keyboard .key.win:hover,
|
||
.keyboard .key.win.pressed {
|
||
transform: perspective(300px) scale(0.97);
|
||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #fad17d, inset 0.32vw 0.32vw 0.63vw #c78908;
|
||
color: #fff;
|
||
text-shadow: 0 0 10px #fad890, 0 0 15px #fad890, 0 0 20px #fad890;
|
||
}
|
||
.keyboard .key.alt {
|
||
background: #5352ed;
|
||
color: #dddcfb;
|
||
}
|
||
.keyboard .key.alt:hover,
|
||
.keyboard .key.alt.pressed {
|
||
transform: perspective(300px) scale(0.97);
|
||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #9291f3, inset 0.32vw 0.32vw 0.63vw #1615ca;
|
||
color: #fff;
|
||
text-shadow: 0 0 10px #a2a1f5, 0 0 15px #a2a1f5, 0 0 20px #a2a1f5;
|
||
}
|
||
.keyboard .key.fn {
|
||
background: #26de81;
|
||
color: #d4f8e6;
|
||
}
|
||
.keyboard .key.fn:hover,
|
||
.keyboard .key.fn.pressed {
|
||
transform: perspective(300px) scale(0.97);
|
||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #76eaaf, inset 0.32vw 0.32vw 0.63vw #189e5a;
|
||
color: #fff;
|
||
text-shadow: 0 0 10px #8aedbb, 0 0 15px #8aedbb, 0 0 20px #8aedbb;
|
||
}
|
||
.keyboard .key.cap {
|
||
background: #ee5a24;
|
||
color: #fcded3;
|
||
position: relative;
|
||
}
|
||
.keyboard .key.cap:hover,
|
||
.keyboard .key.cap.pressed {
|
||
transform: perspective(300px) scale(0.97);
|
||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #f49675, inset 0.32vw 0.32vw 0.63vw #b23a0e;
|
||
color: #fff;
|
||
text-shadow: 0 0 10px #f6a588, 0 0 15px #f6a588, 0 0 20px #f6a588;
|
||
}
|
||
.keyboard .key.cap::before {
|
||
content: '';
|
||
position: absolute;
|
||
width: 0.5vw;
|
||
height: 0.5vw;
|
||
background: #f6ac91;
|
||
top: 1vw;
|
||
right: 1vw;
|
||
border-radius: 50%;
|
||
}
|
||
.keyboard .key.cap.on::before {
|
||
background: #fbded3;
|
||
box-shadow: 0 0 0.5vw 0.2vw rgba(255,255,255,0.8);
|
||
}
|
||
.keyboard .key.tab {
|
||
background: #12cbc4;
|
||
color: #cafaf8;
|
||
}
|
||
.keyboard .key.tab:hover,
|
||
.keyboard .key.tab.pressed {
|
||
transform: perspective(300px) scale(0.97);
|
||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #5aede7, inset 0.32vw 0.32vw 0.63vw #0d8e89;
|
||
color: #fff;
|
||
text-shadow: 0 0 10px #72f0eb, 0 0 15px #72f0eb, 0 0 20px #72f0eb;
|
||
}
|
||
.keyboard .key.enter {
|
||
background: #fdcb6e;
|
||
color: #fff5e2;
|
||
}
|
||
.keyboard .key.enter:hover,
|
||
.keyboard .key.enter.pressed {
|
||
transform: perspective(300px) scale(0.97);
|
||
box-shadow: inset -0.32vw -0.32vw 0.95vw -0.159vw #fddea3, inset 0.32vw 0.32vw 0.63vw #fba403;
|
||
color: #fff;
|
||
text-shadow: 0 0 10px #fde2b0, 0 0 15px #fde2b0, 0 0 20px #fde2b0;
|
||
}
|
||
.keyboard .key.s2 {
|
||
font-size: 1.73vw;
|
||
grid-column: auto/span 2;
|
||
}
|
||
.keyboard .key.s3 {
|
||
font-size: 1.73vw;
|
||
grid-column: auto/span 3;
|
||
}
|
||
.keyboard .key.s4 {
|
||
font-size: 1.73vw;
|
||
grid-column: auto/span 4;
|
||
}
|
||
.keyboard .key.s5 {
|
||
font-size: 1.73vw;
|
||
grid-column: auto/span 5;
|
||
}
|
||
.keyboard .key.s6 {
|
||
font-size: 1.73vw;
|
||
grid-column: auto/span 6;
|
||
}
|
||
.keyboard .key.s12 {
|
||
font-size: 1.73vw;
|
||
grid-column: auto/span 12;
|
||
}
|
||
.keyboard .key[on-shift] {
|
||
font-size: 1.461538461538461vw;
|
||
justify-items: center;
|
||
}
|
||
.keyboard .key[on-shift]::before {
|
||
content: attr(on-shift);
|
||
align-items: end;
|
||
}
|
||
|
||
|
||
|
||
/* 轮播视觉差 start */
|
||
.card-swiper {
|
||
height: 600rpx !important;
|
||
}
|
||
|
||
.card-swiper swiper-item {
|
||
width: 750rpx !important;
|
||
left: 0rpx;
|
||
box-sizing: border-box;
|
||
padding: 0rpx 0rpx 120rpx 0rpx;
|
||
overflow: initial;
|
||
}
|
||
|
||
.card-swiper swiper-item .swiper-item {
|
||
width: 100%;
|
||
display: block;
|
||
height: 100%;
|
||
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-item2 {
|
||
margin-top: -340rpx;
|
||
width: 100%;
|
||
display: block;
|
||
height: 100%;
|
||
border-radius: 0rpx;
|
||
transform: translate(340rpx, 20rpx) scale(0.5, 0.5);
|
||
transition: all 0.6s ease 0s;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.card-swiper swiper-item.cur .swiper-item2 {
|
||
margin-top: -340rpx;
|
||
width: 100%;
|
||
transform: translate(300rpx, 0rpx) scale(0.8, 0.8);
|
||
transition: all 0.6s ease 0s;
|
||
}
|
||
|
||
.card-swiper swiper-item .swiper-item-text {
|
||
margin-top: -320rpx;
|
||
width: 100%;
|
||
display: block;
|
||
height: 50%;
|
||
border-radius: 10rpx;
|
||
transform: translate(0rpx, -40rpx) scale(0.7, 0.7);
|
||
transition: all 0.6s ease 0s;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.card-swiper swiper-item.cur .swiper-item-text {
|
||
margin-top: -380rpx;
|
||
width: 100%;
|
||
transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
|
||
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: 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;
|
||
}
|
||
</style>
|