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

更新众多VIP页面模板

Browse Source
This commit is contained in:
kert
2026-03-19 10:47:37 +08:00
parent d355989fcf
commit 6abd3faa0c
69 changed files with 27601 additions and 1307 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vipPage/life/color/color.vue
+160
View File
@@ -0,0 +1,160 @@
<template>
<view class="template-color tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<!-- 图鸟_LEE，原创，勿喷，上线于2022年3月，开源于2023年9月，晚了1.5年才开源而已，此最新版本优化了界面 -->
<view class="content" :style="{paddingTop: vuex_custom_bar_height + 30 + 'px'}">
<view class="dialog">
<view id="colorBg" class="colorBg" @touchstart="startTouch" @touchmove="moveIng"
@touchend="endTouch">
<view class="roundBuff" :catchtouchmove="true" @c.stop="()=>{}" :style="{transform: `rotate(${degrees}deg)`}"></view>
<view class="colorPan">HSL：{{degrees.toFixed(0)}}</view>
</view>
<!-- 按钮 -->
<view class="tn-flex tn-padding-top-xl">
<view class="tn-flex-1 justify-content-item tn-margin-left tn-margin-right-xs tn-text-center tn-bg-white" style="border-radius: 100rpx;">
<tn-button backgroundColor="#4B98FE " padding="39rpx 0" width="100%" :fontSize="28" :plain="true" fontColor="#4B98FE" shape="round">
<text class="">取 消</text>
</tn-button>
</view>
<view class="tn-flex-1 justify-content-item tn-margin-right tn-margin-left-xs tn-text-center">
<tn-button backgroundColor="#4B98FE " padding="40rpx 0" width="100%" :fontSize="28" fontColor="#FFFFFF" shape="round">
<text class="">确 认</text>
</tn-button>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateColor',
mixins: [template_page_mixin],
data(){
return {
pointerShow: true,
colorPanWidth: 20,
colorPanRadius: 0,
pointerBox: {},
degrees: 0
}
},
mounted() {
uni.getSystemInfo({
success: (res) => {
uni.createSelectorQuery().select('#colorBg').boundingClientRect((rect) => {
this.pointerBox = rect
}).exec()
this.colorPanRadius = res.screenWidth * 0.4
}
})
},
methods: {
startTouch(e) {
const {
pageX,
pageY
} = e.touches[0]
this.rotatePointer(pageX, pageY)
},
endTouch(e) {
const {
pageX,
pageY
} = e.changedTouches[0]
this.rotatePointer(pageX, pageY)
},
moveIng(e) {
const {
pageX,
pageY
} = e.touches[0]
this.rotatePointer(pageX, pageY)
},
rotatePointer(pageX = 0, pageY = 0) {
const {
pointerBox,
colorPanWidth
} = this
const mouseX = pageX - colorPanWidth
const mouseY = pageY - colorPanWidth
var centerY = pointerBox.top + (pointerBox.height / 2) - 0,
centerX = pointerBox.left + (pointerBox.height / 2) - 0,
radians = Math.atan2(mouseX - centerX, mouseY - centerY)
this.degrees = (radians * (180 / Math.PI) * -1) + 180;
}
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.dialog {
display: block;
border-radius: 30rpx;
// background-color: #303030;
margin: 20rpx;
padding: 30rpx;
}
.flex {
display: flex;
justify-content: space-between;
}
.colorBg {
width: 80vw;
height: 80vw;
margin: 5vw;
background: conic-gradient(red,
yellow,
lime,
aqua,
blue,
fuchsia,
red);
border-radius: 50%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.roundBuff {
width: 55vw;
height: 55vw;
-webkit-transform-origin: center 50%;
transform-origin: center 50%;
background: #FFFFFF;
border-radius: 50%;
}
.roundBuff::before {
content: "";
width: 15px;
height: 15px;
background: #FFFFFF;
border: solid #FFFFFF;
border-width: 10px 10px 0 0;
transform: translate(-50%, -50%) rotate(-45deg);
position: absolute;
left: 50%;
top: 2%;
}
.colorPan {
position: absolute;
color: #080808;
font-size: 42rpx;
}
</style>