Skip to content

T
taobao-mini-template
Commit f016bbb1 authored by mqf_0707's avatar mqf_0707
Browse files
Options

组件优化

parent 105bc537
Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 111 deletions
c_client/src/api.js
View file @ f016bbb1
......@@ -43,10 +43,13 @@ const apiList = {
getShareInfo: 'getShareInfo',
getCollectGoods: 'getCollectGoods',
updateEnamePrizeReceived: 'updateEnamePrizeReceived', // 会员权益领取
getRotatePrizeListInfo:'getRotatePrizeListInfo',//获取奖品列表接口,暂未实现
drawRotatePrize:'drawRotatePrize',//大转盘抽奖接口,暂未实现
getPrizeConfig: 'getPrizeConfig', // 获取奖品配置
drawRotatePrize:'drawLottery',//大转盘抽奖接口,暂未实现
exchangePrize: 'exchangePrize', // 兑换奖品
getUserInfo: 'getUserInfo', // 获取用户信息
getUserRankList: 'getUserRankList', // 获取排名列表
startGame: 'startGame', // 开始游戏
submitGame: 'submitGame', // 提交游戏
}
// 生成API
......
c_client/src/components/_tb_comps/RotateWheel/RotateWheel.jsx
View file @ f016bbb1
......@@ -47,7 +47,7 @@ const RotateWheel = props => {
* @description 获取奖品列表
*/
// const getPrizeListInfo = async () => {
// const {success,data,code,message} = await API.getRotatePrizeListInfo().catch((res)=>{
// const {success,data,code,message} = await API.getPrizeConfig().catch((res)=>{
// showToast({title:res?.message ? res?.message : '网络异常，请稍后再试'})
// })
// if(success && data){
......
c_client/src/components/_tb_comps/SwiperView/SwiperView.jsx
View file @ f016bbb1
......@@ -25,9 +25,9 @@ const SwiperView = (props) => {
duration=1000,
interval=1500,
disableTouch=false,
swiperGroup={width:300,height:300,overflow:'visible'},
swiperContent={width:250,height:300,backgroundColor:'#fff',backgroundImage:'',borderRadius:25},
imgContent={width:200,height:200},
swiperGroup={width:400,height:750,overflow:'visible'},
swiperContent={width:400,height:700,backgroundColor:'#fff',backgroundImage:'',borderRadius:25},
imgContent={width:300},
textContent={width:200,height:60},
showLeftRightBtn=true,
......@@ -127,7 +127,7 @@ const SwiperView = (props) => {
<View
className="scroll_container"
style={{
width:`${700/100}rem`,
width:`${750/100}rem`,
overflow:'hidden'
}}
>
......@@ -154,8 +154,8 @@ const SwiperView = (props) => {
<View
className={`scroll_item ${i === currentIndex ? "current_item" : ""} ${useCustomAni(i)}`}
style={{
width:`${swiperContent.width/100}rem`,
height:`${swiperContent.height/100}rem`,
width:`100%`,
height:`100%`,
backgroundColor:`${ swiperContent.backgroundColor}`,
backgroundImage:`${ swiperContent.backgroundImage}`,
borderRadius:`${swiperContent.borderRadius/100}rem`
......@@ -174,11 +174,8 @@ const SwiperView = (props) => {
{/* 单个swiper主要内容 */}
<Image
className="img"
style={{
width:`${imgContent.width/100}rem`,
height:`${imgContent.height/100}rem`
}}
src={item.image}></Image>
style={{width:`${imgContent.width/100}rem`}}
src={item.image} mode="widthFix"></Image>
{
item?.content &&
<View
......@@ -198,7 +195,7 @@ const SwiperView = (props) => {
</Swiper>
</View>
<View className='right_btn' onTap={()=>turnRound('RIGHT')}>&gt;&gt;</View>
<View className='right_btn' onTap={()=>turnRound('RIGHT')}>&gt;&gt;</View>
</View>
);
};
......
c_client/src/components/_tb_comps/SwiperView/SwiperView.less
View file @ f016bbb1
......@@ -48,33 +48,20 @@
position: relative;
.swiper_group {
margin: 0 auto;
position: relative;
swiper-item {
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
.image-property(cover, center center);
// border: 1px solid cyan;
// box-sizing: border-box;
}
.swiper_group {
margin: 0 auto;
position: relative;
.scroll_item {
// width: 300px;
margin: 0 auto;
position: relative;
border-radius: 20px;
.image-property(cover, top center);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.checkPic {
width: 60px;
height: 60px;
......@@ -83,25 +70,36 @@
right: 40px;
top: 40px;
}
.text_content{
margin: 0 auto;
box-sizing: border-box;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
overflow: hidden;
.text{
color: #232323;
text-align: center;
line-height: 30px;
font-size: 24px;
.item_img_content {
width: 100%;
.img {
margin: 20px auto 10px;
width: 100%;
display: block;
border-radius: 20px;
background-repeat: no-repeat;
background-position: top center;
}
.text_content{
margin: 0 auto;
box-sizing: border-box;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
overflow: hidden;
.text{
color: #232323;
text-align: center;
line-height: 30px;
font-size: 24px;
}
}
}
&.current_item {
transform: scale(1.2);
.item_img_content {
.img{}
.text_content{
......@@ -109,74 +107,74 @@
}
}
}
}
// &.item_left{
// transform: translateX(-300px);
// transition: all 1s ease;
// &.item_left{
// transform: translateX(-300px);
// transition: all 1s ease;
// }
// &.move_right{
// transform: translateX(300px);
// transition: all 1s ease;
// }
// &.item_middle{
// transform: translateX(0px);
// transition: all 1s ease;
// }
}
}
// }
// &.move_right{
// transform: translateX(300px);
// transition: all 1s ease;
// }
// &.item_middle{
// transform: translateX(0px);
// transition: all 1s ease;
// }
}
}
@keyframes movein {
from {
transform: perspective(1000px) translate3d(0,0,0) rotate3d(0, 1, 0, 25deg) scale(0.85);
transform-style: preserve-3d;
transform-origin: 45% center;
}
50%{
transform: perspective(1000px) translate3d(0,20px,0) rotate3d(0, 1, 0, 25deg) scale(0.85);
transform-style: preserve-3d;
transform-origin: 45% center;
}
to {
transform: perspective(1100px) translate3d(0,0,0) rotate3d(0, 1, 0, 0deg) scale(1);
transform-origin: 45% center;
transform-style: preserve-3d;
}
}
from {
transform: perspective(1000px) translate3d(0,0,0) rotate3d(0, 1, 0, 25deg) scale(0.85);
transform-style: preserve-3d;
transform-origin: 45% center;
}
50%{
transform: perspective(1000px) translate3d(0,20px,0) rotate3d(0, 1, 0, 25deg) scale(0.85);
transform-style: preserve-3d;
transform-origin: 45% center;
}
to {
transform: perspective(1100px) translate3d(0,0,0) rotate3d(0, 1, 0, 0deg) scale(1);
transform-origin: 45% center;
transform-style: preserve-3d;
}
}
@keyframes moveout{
from {
transform: perspective(1000px) rotate3d(0, 1, 0, 0deg) scale(1);
transform-style: preserve-3d;
transform-origin: 45% center;
}
50%{
transform: perspective(1000px) rotate3d(0, 1, 0, 25deg) scale(1);
transform-style: preserve-3d;
transform-origin: 45% center;
}
to {
transform: perspective(1200px) rotate3d(0, 1, 0, 25deg) scale(0.85);
transform-origin: 45% center;
transform-style: preserve-3d;
}
from {
transform: perspective(1000px) rotate3d(0, 1, 0, 0deg) scale(1);
transform-style: preserve-3d;
transform-origin: 45% center;
}
50%{
transform: perspective(1000px) rotate3d(0, 1, 0, 25deg) scale(1);
transform-style: preserve-3d;
transform-origin: 45% center;
}
to {
transform: perspective(1200px) rotate3d(0, 1, 0, 25deg) scale(0.85);
transform-origin: 45% center;
transform-style: preserve-3d;
}
}
@keyframes scales {
from{
transform: scale(1,1);
transform-origin: center;
}
50%{
transform: scale(1.1,1.1);
transform-origin: center;
}
to{
transform: scale(1,1);
transform-origin: center;
from{
transform: scale(1,1);
transform-origin: center;
}
50%{
transform: scale(1.1,1.1);
transform-origin: center;
}
to{
transform: scale(1,1);
transform-origin: center;
}
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment