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