公告列表
公告列表
收藏
回答

手机上 团长字所在的text不能被父级overflow: hidden;

<!--pages/text/text.wxml-->
 
<view class='content'>
  <view class='infobox'>
    <view class='infoimg'>
      <image src='../../images/1.jpg'></image>
      <image src='../../images/Group.png' class='group'></image>
    </view>
    <view class='info'>
      <view class='name'>
        <text>星巴克美式咖啡大杯电子券</text>
        <view bindtap='ruleboxshow'>抽奖规则</view>
      </view>
      <text class='time'>08-10 18:30 开奖 <text>奖品数量：1</text></text>
    </view>
    <!-- 参与 -->
    <view class='partake'>免费参与抽奖</view>
    <!--  等待开奖-->
    <view class='waitprize'>
      <view class='waitbtn'>等待开奖</view>
      <view class='max'>参团好友最多4人</view>
      <view class='waitbox'>
 
        <view class='waitlist' wx:for="{{waitprize}}" wx:key="*this" bindtap='{{item.name ? " ": "openh5"}}'>
          <view class='waitimg' wx:if="{{item.img}}">
            <image src='{{item.img}}'></image>
            <text wx:if="{{item.is}}">团长</text>
          </view>
          <view class='waitimg' wx:else>
            <view class='kong'></view>
          </view>
          <text class='waitname'>{{item.name?item.name:"虚位以待"}}</text>
        </view>
      </view>
    </view>
    <!--  结果-->
    <view class='resultprize'>
      <view class='{{result ? "noresultbtn" : "resultbtn"}}' bindtap='{{result ? "" : "fillinformationshow"}}'>{{result ? "未中奖" : "恭喜中奖"}}</view>
      <view class='prize'>中奖名单</view>
      <view class='waitbox'>
 
        <view class='waitlist' wx:for="{{prizelist}}" wx:key="*this">
          <view class='waitimg'>
            <image src='{{item.img}}'></image>
          </view>
          <text class='waitname'>{{item.name}}</text>
        </view>
      </view>
    </view>
    <!-- 已有多少人参加 -->
    <view class='involved'>
      <view>已有
        <text>15189</text> 人参加</view>
      <view class='imgbox'>
        <image src='../../images/1.jpg'></image>
        <image src='../../images/1.jpg'></image>
      </view>
    </view>
  </view>
  <!-- 赞助商 -->
  <view class='sponsor'>
    <view class='sponsortop'>
      <view class='sponsorleft'>
        <image src='../../images/flower.png'></image>
        <text>赞助商</text>
      </view>
      <view class='sponsorright'>
        <text>{{sponsor}}</text>
        <image src='../../images/youjiantou.png'></image>
      </view>
    </view>
    <view class='sponsorcontent'>{{sponsorcontent}}</view>
  </view>
</view>
<!-- 抽奖 规则-->
<view class='mask' wx:if="{{rulebox}}" bindtap='ruleboxshow'>
  <view class='rulebox' catchtap='kong'>
    <view class='ruleboxtop'>抽奖规则
      <image src='../../images/close.png' bindtap='ruleboxshow'></image>
    </view>
    <view class='ruleboxcontent'>抽奖规则</view>
  </view>
</view>
/* pages/text/text.wxss */
 
.content{
  width: 100%;
  height: 100vh;
  overflow-y: auto;
}
.infobox {
  padding: 20rpx 32rpx 60rpx;
  background: #fff;
}
 
.infoimg {
  width: 100%;
  height: 686rpx;
  position: relative;
}
 
.infoimg image {
  width: 100%;
  height: 100%;
}
 
.group {
  width: 82rpx !important;
  height: 82rpx !important;
  position: absolute;
  top: 0;
  left: 0;
}
 
.info {
  height: 138rpx;
  width: 100%;
  padding: 20rpx 0;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}
 
.name {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
.name text {
  font-size: 32rpx;
  color: #333;
}
 
.name view {
  width: 134rpx;
  height: 40rpx;
  border: 1rpx solid #a8a0a8;
  border-radius: 4rpx;
  font-size: 24rpx;
  text-align: center;
  line-height: 40rpx;
  color: #666;
}
 
.time {
  font-size: 24rpx;
  color: #666;
}
 
.involved {
  margin-top: 40rpx;
  text-align: center;
  font-size: 24rpx;
  color: #333;
}
 
.involved text {
  font-size: 32rpx;
  color: #ffa72f;
}
 
.imgbox {
  margin-top: 40rpx;
  display: flex;
  justify-content: center;
}
 
.imgbox image {
  width: 52rpx;
  height: 52rpx;
  margin-left: 16rpx;
  margin-right: 16rpx;
  border-radius: 50%;
}
 
/* partake */
 
.partake {
  width: 316rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: #ffa72f;
  border-radius: 100px;
  margin: 0 auto;
  text-align: center;
  font-size: 32rpx;
  color: #fff;
  margin-top: 60rpx;
}
 
/*  wait*/
 
.waitprize {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
 
.waitbtn {
  width: 248rpx;
  height: 80rpx;
  border: 1rpx solid #ffa72f;
  border-radius: 100px;
  text-align: center;
  line-height: 80rpx;
  color: #ffa72f;
  margin: 40rpx 0;
}
 
.max {
  width: 100%;
  font-size: 26rpx;
  color: #999;
  line-height: 36rpx;
  position: relative;
  text-align: center;
}
 
.max::after {
  position: absolute;
  content: "";
  height: 2rpx;
  width: calc(50% - 120rpx);
  border-top: 1rpx #ebebeb dashed;
  top: 50%;
  left: 0;
}
 
.max::before {
  position: absolute;
  content: "";
  height: 2rpx;
  width: calc(50% - 120rpx);
  border-top: 1rpx #ebebeb dashed;
  top: 50%;
  right: 0;
}
 
.waitbox {
  width: 100%;
  margin: 40rpx 60rpx;
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  overflow-x: scroll;
}
 
.waitlist {
  width: 96rpx;
  height: 142rpx;
  /* overflow: hidden; */
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;
}
 
.waitimg {
  width: 96rpx;
  height: 96rpx;
  overflow: hidden;
  border-radius: 50%;
  position: relative;
}
.kong {
  width: calc(100% - 6rpx);
  height: calc(100% - 6rpx);
  border-radius: 50%;
  border: #666 1rpx dashed;
  position: relative;
}
 
.kong::after {
  content: "";
  height: 4rpx;
  width: 36rpx;
  background: #ccc;
  position: absolute;
  top: calc(50% - 2rpx);
  left: calc(50% - 18rpx);
}
 
.kong::before {
  content: "";
  width: 4rpx;
  height: 36rpx;
  background: #ccc;
  position: absolute;
  top: calc(50% - 18rpx);
  left: calc(50% - 2rpx);
}
 
.waitimg image {
  width: 100%;
  height: 100%;
}
 
.waitimg text {
  width:100%;
  height: 24rpx;
  position: absolute;
  font-size: 20rpx;
  color: #fff;
  text-align: center;
  background: #ffa72f;
  bottom: 0rpx;
  left: 0rpx;
  /* border-bottom-left-radius: 50% 100%;
  border-bottom-right-radius: 50% 100%; */
}
.waitname {
  margin-top: 12rpx;
  display: inline-block;
  width: 96rpx;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 24rpx;
  color: #333;
}
 
/* resultprize 结果*/
 
.resultprize {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
 
.resultbtn {
  margin: 40rpx 0;
  width: 248rpx;
  height: 80rpx;
  border-radius: 200rpx;
  text-align: center;
  line-height: 80rpx;
  background: #ffa72f;
  font-size: 32rpx;
  color: #fff;
}
 
.noresultbtn {
  margin: 40rpx 0;
  width: 248rpx;
  height: 80rpx;
  border-radius: 200rpx;
  text-align: center;
  line-height: 80rpx;
  border: 1rpx solid #ccc;
  font-size: 32rpx;
  color: #999;
}
 
.prize {
  width: 100%;
  font-size: 26rpx;
  color: #999;
  line-height: 36rpx;
  position: relative;
  text-align: center;
}
 
.prize::after {
  position: absolute;
  content: "";
  height: 2rpx;
  width: calc(50% - 120rpx);
  border-top: 1rpx #ebebeb dashed;
  top: 50%;
  left: 0;
}
 
.prize::before {
  position: absolute;
  content: "";
  height: 2rpx;
  width: calc(50% - 120rpx);
  border-top: 1rpx #ebebeb dashed;
  top: 50%;
  right: 0;
}
 
/* 赞助商 */
 
.sponsor {
  padding: 0 32rpx;
  box-sizing: border-box;
  width: 100%;
  margin-top: 20rpx;
  background: #fff;
}
 
.sponsortop {
  height: 96rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #ebebeb;
}
.sponsorleft{
  display: flex;
  align-items: center;
}
.sponsorleft image {
  width: 30rpx;
  height: 30rpx;
  margin-right: 20rpx;
}
 
.sponsorleft text {
  font-size: 28rpx;
  color: #999;
}
.sponsorright{
  display: flex;
  align-items: center;
}
.sponsorright image {
  width: 32rpx;
  height: 32rpx;
  margin-left: 20rpx;
}
 
.sponsorright text {
  font-size: 28rpx;
  color: #333;
}
 
.sponsorcontent {
  padding-top: 20rpx;
  padding-bottom: 40rpx;
  font-size: 28rpx;
  color: #666;
  line-height: 40rpx;
}
 
/* 蒙层 */
 
.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
}
 
/*  rulebox*/
 
.rulebox {
  height: 516rpx;
  border-radius: 8rpx;
  margin: 0 auto;
  margin-top: 276rpx;
  width: 630rpx;
  background: #fff;
}
 
.ruleboxtop {
  height: 96rpx;
  width: 100%;
  text-align: center;
  line-height: 96rpx;
  font-size: 30rpx;
  color: #333;
  position: relative;
}
 
.ruleboxtop image {
  width: 44rpx;
  height: 44rpx;
  position: absolute;
  top: 16rpx;
  right: 16rpx;
}
 
.ruleboxcontent {
  height: calc(100% - 96rpx);
  overflow-y: scroll;
  padding: 26rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #151515;
}
 
.fillinformation {
  height: 540rpx;
  border-radius: 8rpx;
  margin: 0 auto;
  margin-top: 276rpx;
  width: 630rpx;
  background: #fff;
}
 
.fillinformationtent {
  height: calc(100% - 96rpx);
  overflow-y: scroll;
  padding: 20rpx 40rpx 40rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #151515;
}
 
.input {
  width: 550rpx;
  height: 96rpx;
  background: #ebebeb;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
}
 
.input view {
  width: 172rpx;
  height: 100%;
  padding-left: 20rpx;
  line-height: 96rpx;
  font-size: 28rpx;
  color: #333;
}
 
.input input {
  flex: 1;
}
 
.textarea {
  height: 160rpx;
  width: 100%;
  background: #ebebeb;
  margin-top: 20rpx;
  margin-bottom: 40rpx;
  padding: 20rpx;
  box-sizing: border-box;
}
 
.textarea textarea {
  width: 100%;
  height: 100%;
}
 
.surebtn {
  background: #413d3c;
  border-radius: 8rpx;
  width: 234rpx;
  height: 68rpx;
  line-height: 68rpx;
  text-align: center;
  font-size: 26rpx;
  color: #fff;
  margin: 0 auto;
}
// pages/activitydetail/activitydetail.js
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    userid: 0,
    activeid: 0,
    result: false,
    sponsor: "星巴克免费喝",
    sponsorcontent: "智享黑卡提供最高20万消费额度，甄选全球轻奢好物，探寻黑科技产品；真人管家一对一在线服务，覆盖全球衣食住行娱乐等优质权益，追求精致生活，成为智享黑卡持卡人，即可尊享多种权益，与智者享天下。",
    fillinformation: false,
    rulebox: false,
    input: "",
    textarea: "",
    waitprize: [{
      is: true,
      name: "5456dfs",
      img: "../../images/1.jpg"
    }, {
      is: false,
      name: "5456dfs",
      img: "../../images/1.jpg"
    }, {
      is: false,
      name: "",
      img: ""
    }, {
      is: false,
      name: "5456dfs",
      img: "../../images/1.jpg"
    }],
    prizelist: [{
      name: "5456dfs",
      img: "../../images/1.jpg"
    }]
 
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
 
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
 
  },
  // ruleboxshow抽奖规则
  ruleboxshow: function () {
    this.setData({
      rulebox: !this.data.rulebox
    })
  },
  // fillinformationshow 中奖框信息填写
  fillinformationshow: function () {
    this.setData({
      fillinformation: !this.data.fillinformation
    })
  },
  kong: function () {
 
  }
})


回答关注问题邀请回答
收藏

1 个回答

  • AAAA工作
    AAAA工作
    2018-09-19

    最后调试发现 受最外层的 content 类名  的影响，会是超出隐藏出现不正常现象



    正常效果应该是


    2018-09-19
    有用
    回复
请 登录 后发表内容
相关问题
相关文档