按钮底部样式

最新推荐文章于 2026-08-18 20:01:07 发布
原创 最新推荐文章于 2026-08-18 20:01:07 发布 · 155 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测

在这里插入图片描述

  <view class="taskCenterPage">
    <pages-load :isload="isload"></pages-load>
    <view class="bottom" v-if="isload">
      <view class="mosan" v-if="list2.length > 0">
        <view class="list" v-for="(item, index) in list2">
          <view class="left">
            <view class="url">
              <image
                class="image"
                :src="
                  item.url
                    ? item.url
                    : 'https://hiin-file.cztv.com/d87900a7a7fa491ab0deaead666c9f71.png'
                "
                lazy-load
                mode=""
              >
              </image>
            </view>
            <view class="text">
              {{ item.goodName }}
            </view>
          </view>
          <view class="right" @click.stop="openPopUp(item)">
            <view class="quwancheng">
              <view
                class="text"
                :style="{
                  color: item.writeOffOrNot ? '#fcf4f7' : '##fff',
                  background: item.writeOffOrNot ? '#efa3bd' : '#e66490',
                }"
              >
                {{
                  item.isTheRewardClaimed
                    ? item.writeOffOrNot
                      ? "已核销"
                      : "核销"
                    : "点我领取"
                }}</view
              >
            </view>
          </view>
        </view>
      </view>
      <view v-else class="empty-page">
        <image
          class="empty-icon"
          src="/static/img/bigPlayer/empty-jar.png"
          mode="widthFix"
        ></image>
        <!-- 空状态文字 -->
        <text class="empty-text">暂无未领取商品~</text>
      </view>
    </view>
    <!-- 出示二维码 -->
    <!-- <view class="chushierweima" @click.stop="openPopUp">
      <image
        class="image"
        src="https://hiin-file.cztv.com/40f1cc8f53ce4aae9fb5652af1c7d8ec.png"
        mode="heightFix"
      >
      </image>
    </view> -->
    <view
      class="PopUp"
      @click.stop="closePopUp"
      v-if="PopUpShow"
      :style="{
        '--theme-color': ThemeColor,
        '--secondary-color': SecondaryColor,
      }"
    >
      <view class="info" @click.stop>
        <view class="title">
          <view class="left"> </view>
          <view class="title-text">
            <view class="square"> </view>
            <view class="text"> 核销码 </view>
            <view class="square"> </view>
          </view>
          <view class="rigth" @click.stop="closePopUp">
            <image src="/static/img/bigPlayer/delete.png" mode=""> </image>
          </view>
        </view>
        <view class="content">
          <view class="biankuang">
            <image class="erweima" :src="QRCode" mode=""></image>
          </view>
          <view class="text"> 任务完成后可向工作人员出示该二维码 </view>
        </view>
        <view class="btn-1">
          <view class="btn-bottom left" @click.stop="closePopUp">
            <view class="text"> 关&nbsp;闭&nbsp;弹&nbsp;窗 </view>
          </view>
        </view>
        <image
          class="icon"
          src="https://hiin-file.cztv.com/0ed138336df64124969653f04d9af7d2.png"
          mode=""
        >
        </image>
      </view>
    </view>
    <view
      class="PopUp"
      @click.stop="closePopUp"
      v-if="PopUpShow"
      :style="{
        '--theme-color': ThemeColor,
        '--secondary-color': SecondaryColor,
      }"
    >
      <view class="info" @click.stop>
        <view class="title">
          <view class="left"> </view>
          <view class="title-text">
            <view class="square"> </view>
            <view class="text"> 个人二维码 </view>
            <view class="square"> </view>
          </view>
          <view class="rigth" @click.stop="closePopUp">
            <image src="/static/img/bigPlayer/delete.png" mode=""> </image>
          </view>
        </view>
        <view class="content">
          <view class="biankuang">
            <image class="erweima" :src="QRCode" mode=""></image>
          </view>
          <view class="text"> 任务完成后可向工作人员出示该二维码 </view>
        </view>
        <view class="btn-1">
          <view class="btn-bottom left" @click.stop="closePopUp">
            <view class="text"> 关&nbsp;闭&nbsp;弹&nbsp;窗 </view>
          </view>
        </view>
        <image
          class="icon"
          src="https://hiin-file.cztv.com/0ed138336df64124969653f04d9af7d2.png"
          mode=""
        >
        </image>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getUserClaimPageSelect,
  getClaimTaskReward,
  getWriteOff,
  postWriteOffTaskPlayerApi,
  getGenQrCode,
  goodsWriteOff,
  getGoodsWriteOff,
} from "@/utils/BigPlayer.js";
export default {
  data() {
    return {
      list2: [],
      PopUpShow: false,
      ThemeColor: "#ee9fba",
      SecondaryColor: "#ee9fba",
      QRCode: "",
      mainTaskId: "",
      id: "",
      isload: false,
      scrollTop: 0,
      old: {
        scrollTop: 0,
      },
      isload: true,
    };
  },
  onShow() {
    this.scrollTop = this.old.scrollTop;
    this.$nextTick(() => {
      this.scrollTop = 0;
    });
  },
  onLoad() {
    this.init();
  },
  methods: {
    init() {
      getUserClaimPageSelect({
        userId: 1,
        // userId: uni.getStorageSync("memberid"),
        // isTheRewardClaimed: false,
      }).then((res) => {
        console.log("用户领取信息", res);
        if (res.code == 200) {
          this.list2 = res.data;
          this.isload = true;
        }
      });
    },
    handleTabChange(index) {
      console.log("当前激活标签索引：", index);
      // 可在此处添加切换标签后的业务逻辑（如更新内容区域）
    },
    //   出示二维码
    openPopUp(item) {
      console.log("点击二维码", item);
      if (item.writeOffOrNot) return;
      if (!item.isTheRewardClaimed) {
        // 领取接口
        this.givGift(item);
      } else {
        let _this = this;
        uni.showModal({
          title: "",
          content: "是否确认核销",
          cancelText: "取消",
          confirmText: "确认",
          success: (res) => {
            if (res.confirm) {
              _this.getQrcodeTaskPlayer(item);
            }
          },
        });
      }
    },
    // 领取商品
    givGift(sceneValue) {
      uni.showModal({
        title: "",
        content: "是否确认领取",
        cancelText: "取消",
        confirmText: "确认",
        success: (res) => {
          if (res.confirm) {
            getClaimTaskReward({
              id: sceneValue.id,
              userId: sceneValue.userId,
              // userId: uni.getStorageSync("memberid"),
            })
              .then((res) => {
                if (res.code == 200) {
                  uni.showToast({
                    title: "领取成功",
                    icon: "success",
                    duration: 2000,
                  });
                  // 获取任务列表
                  this.init();
                } else {
                  uni.showToast({
                    title: res.message,
                    icon: "none",
                    duration: 2000,
                  });
                }
              })
              .catch((err) => {
                uni.showToast({
                  title: err.msg,
                  icon: "none",
                });
              });
          }
        },
      });
    },
    // 关闭二维码弹窗
    closePopUp() {
      this.PopUpShow = false;
      this.getDetailTaskPlayer();
    },
    // 二维码请求
    getQrcodeTaskPlayer(item) {
      this.PopUpShow = true;
      let _this = this;
      let params = {
        id: item.id,
        userId: item.userId,
      };
      getGenQrCode(params).then((res) => {
        _this.QRCode = res.data;
        setTimeout(() => {
          getGoodsWriteOff({
            id: "28",
            userId: 1,
          }).then((res) => {
            console.log("核销结果", res);
            uni.showToast({
              title: "核销成功",
              icon: "success",
            });
            this.init();
          });
        }, 200);
      });
    },
    // 操作/页面跳转 去完成
    gotoPage(item) {
      //   const guideCoordinateInfo = JSON.stringify(item.guideCoordinateInfo);
      //   uni.setStorageSync("guideCoordinateInfo", guideCoordinateInfo);
      //   uni.navigateTo({
      //     url: "/BigPlayer/guideMap/index",
      //   });
    },
    // 扫码核销
    handleScan() {
      uni.scanCode({
        success: (res) => {
          console.log("扫码结果：", res.result, res);
          if (!res.path) {
            uni.showToast({
              title: "无效码",
              icon: "error",
            });
            return;
          } else {
            // uni.showToast({
            // 	title: '核销成功',
            // 	icon: 'success'
            // })
            // 使用字符串方法
            let path = res.path;
            const sceneIndex = path.indexOf("scene=");
            if (sceneIndex !== -1) {
              const sceneValue = path.substring(sceneIndex + 6);
              console.log("扫码获取", sceneValue);
              this.id = sceneValue;
              // this.postWriteOffTaskPlayer(sceneValue);
            } else {
              uni.showToast({
                title: "无效码",
                icon: "error",
              });
              return;
            }
          }
        },
      });
    },
    postWriteOffTaskPlayer(sceneValue) {
      getGoodsWriteOff({
        id: sceneValue,
        userId: uni.getStorageSync("memberid"),
      })
        .then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: "核销成功",
              icon: "success",
              duration: 2000,
            });
            // 获取任务列表
            this.init();
          } else {
            uni.showToast({
              title: res.message,
              icon: "none",
              duration: 2000,
            });
          }
        })
        .catch((err) => {
          uni.showToast({
            title: err.msg,
            icon: "none",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.taskCenterPage {
  position: fixed;
  top: 34rpx;
  left: 0;
  width: 100vw;
  min-height: 100vh;
  background-color: #f5e1ea;
  // background-repeat: no-repeat;
  // background-position: center;
  // background-attachment: fixed;
  .bottom {
    width: 100vw;
    display: flex;
    justify-content: center;
    .mosan {
      // background-color: #f5e1ea;
      background-color: #f5e1ea;
      width: 95%;
      flex-direction: column;
      .list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        border-radius: 48rpx;
        background: #fff;
        border: 4rpx solid #e46590;
        box-sizing: border-box;
        font-family: "FZSEJW", "楷体";
        font-weight: 500;
        margin-top: 60rpx;
        .left {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .url {
            width: 120rpx;
            height: 120rpx;
            border-radius: 10rpx;
            overflow: hidden;
            margin-right: 16rpx;
            .image {
              width: 100%;
              height: 100%;
            }
          }
          .text {
            color: #e46490;
            font-family: "FZSEJW", "楷体";
            font-weight: 900;
            font-size: 40rpx;
          }

          .name {
            color: #1d2129;
            font-size: 32rpx;
            font-style: normal;
            font-weight: 500;
            line-height: 48rpx;

            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-start;

            .top {
              color: var(--gray-gray-1090084, #1d2129);
              font-size: 32rpx;
              font-style: normal;
              font-weight: 600;
              line-height: 24px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .bottom {
              color: var(--warning-warning-6, #ff7d00);
              font-size: 24rpx;
              font-style: normal;
              font-weight: 400;
              line-height: 20px;

              .cc1 {
                color: #4e5969;
              }

              .cc3 {
                color: #00b42a;
              }
            }
          }
        }
        .right {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          position: absolute;
          right: 30rpx;

          .quwancheng {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;

            .text {
              color: #ffffff;
              display: flex;
              align-items: center;
              gap: 8rpx;
              color: #ffffff;
              background: #e56590;
              font-family: "FZSEJW", "楷体";
              font-weight: 900;
              transform: scale(0.8);
              text-align: center;
              //
              font-weight: 900;
              font-family: "FZSEJW", "楷体";
              display: inline-block;
              padding: 28rpx 32rpx;
              margin: 0 10rpx;
              border: 10rpx solid #fff;
              border-radius: 60rpx;
              cursor: pointer;
              box-shadow: 0 10rpx 0 0 rgba(218, 218, 218, 1);
              align-self: stretch;
              font-feature-settings: "liga" off, "clig" off;
              font-size: 48rpx;
            }
            .text1 {
              display: flex;
              justify-content: center;
              align-items: center;

              .text12 {
                color: #f38828;
                font-size: 24rpx;
                font-style: normal;
                font-weight: 500;
                line-height: 40rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }

              .triangle-right {
                width: 0;
                height: 0;
                border-top: 10rpx solid transparent;
                border-bottom: 10rpx solid transparent;
                border-left: 10rpx solid #f38828;
                margin: 0 0 0 10rpx;
              }
            }
          }

          .image {
            width: 100rpx;
            height: 100rpx;
          }
        }
      }
    }
  }
  .chushierweima {
    position: fixed;
    right: 60rpx;
    bottom: 0rpx;
    width: 180rpx;
    height: 180rpx;
    z-index: 110;

    .image {
      width: 100%;
      height: 100%;
    }
  }
  .PopUp {
    font-family: "FZSEJW", "楷体";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    min-height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48rpx;

    .info {
      border-radius: 16px;
      border: 2.5px solid var(--theme-color);
      background: #fff;
      display: flex;
      padding: 24px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 12px;
      align-self: stretch;
      width: 100%;
      position: relative;

      .title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title-text {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .square {
          position: relative;
          width: 28rpx;
          height: 28rpx;
          background-color: var(--theme-color);
          transform: rotate(-8deg);
          margin: 0 20rpx;
        }

        .square::before {
          content: "";
          position: absolute;
          top: 6rpx;
          /* 阴影的偏移量 */
          left: 6rpx;
          /* 阴影的偏移量 */
          width: 100%;
          height: 100%;
          background-color: var(--secondary-color);
          /* 阴影颜色和透明度 */
        }

        .text {
          color: var(--theme-color);
          font-feature-settings: "liga" off, "clig" off;
          font-size: 36rpx;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
        }

        .left,
        .rigth {
          width: 48rpx;
          height: 48rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }

      .content {
        color: var(--theme-color);
        align-self: stretch;
        font-size: 24rpx;
        font-weight: 500;
        line-height: 20px;
        white-space: pre-wrap;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;

        .biankuang {
          border: 2rpx solid var(--theme-color);
          width: 360rpx;
          height: 360rpx;
          border-radius: 32rpx;
          box-sizing: border-box;

          .erweima {
            border-radius: 32rpx;
          }
        }

        .text {
          color: var(--theme-color);
          text-align: center;
          font-feature-settings: "liga" off, "clig" off;
          font-size: 12px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          padding-top: 24rpx;
        }
      }

      .btn-1 {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .btn-bottom {
          border-radius: 16px;
          border: 2px solid var(--secondary-color);

          display: flex;
          justify-content: center;
          align-items: center;
        }

        .left {
          background: #fff;

          .text {
            display: flex;
            padding: 8px 16px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            border-radius: 26rpx;
            border: 2px solid var(--theme-color);
            background: #fff;
            color: var(--theme-color);
            text-align: center;
            font-feature-settings: "liga" off, "clig" off;
            font-size: 48rpx;
            font-style: normal;
            font-weight: 400;
            line-height: 120%;
            /* 28.8px */
          }
        }

        .right {
          background: var(--secondary-color);

          .text {
            display: flex;
            padding: 8px 16px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            border-radius: 26rpx;
            border: 1px solid var(--theme-color);
            background: var(--secondary-color);
            color: var(--theme-color);
            text-align: center;
            font-feature-settings: "liga" off, "clig" off;
            font-size: 48rpx;
            font-style: normal;
            font-weight: 400;
            line-height: 120%;
          }
        }
      }

      .icon {
        width: 250rpx;
        height: 225rpx;
        position: absolute;
        top: -80rpx;
        left: -65rpx;
      }
    }
  }
  .empty-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 400rpx;
    background-color: #f5e1ea;
    overflow: hidden;
  }
  .empty-icon {
    width: 200rpx;
    margin-bottom: 30rpx;
  }
  .empty-text {
    font-size: 32rpx;
    color: #e56590;
    font-weight: 900;
    font-family: "FZSEJW", "楷体";
  }
}
</style>
标签
#javascript #前端 #开发语言
Y4258
关注
Flutter学习笔记15-FloatingActionButton实现App底部导航凸起按钮
convex1009848621的博客
11-11 915
FloatingActionButton快速上手
ant design修改样式 顶部logo标题 显示隐藏按钮 底部友情链接
weixin_44175192的博客
11-16 1049
ant design修改样式 顶部logo标题 显示隐藏按钮 底部友情链接 删除顶部显示隐藏按钮 删除顶部logo及标题 底部版权友情链接
如何修改a-modal的底部按钮样式啊？？？？
yocor0715的博客
05-27 177
使用:deep穿透样式也不行,使用getContainer也不行 怎么解决啊。
手机直播源码，突出底部导航栏中间按钮的样式
云豹网络科技
12-30 707
手机直播源码，突出底部导航栏中间按钮的样式实现的相关代码 import 'package:app_bottom_navigation_bar/theme/my_theme.dart'; import 'package:app_bottom_navigation_bar/view/pages/home-page.dart'; import 'package:app_bottom_navigation_bar/view/pages/vedio_page.dart'; import 'package:app_bo
uni-app中配置文件、内链样式、刷新加载、全局样式、底部按钮
qq_46179813的博客
05-06 917
一、uni-app 中pages.json的配置 1、pages数组中第一项表示应用启动页 pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path":"pages/index/index", "style":{ // 设置下拉 "enablePullDownRefresh":true } } ] 二、pages.json中的内链样式设置 1、navigation
ionic4自定义底部Tab五个按钮的样式（按钮凸起效果）
zebraMeat的博客
11-26 1342
ionic4自定义底部Tab五个按钮的样式效果图实现代码 效果图 实现代码 tabs.page.html代码. <ion-tabs (ionTabsDidChange)="tabchange($event)"> <ion-tab-bar slot="bottom" translucent="true"> <ion-tab-button tab="t...
elementui的选择器的下拉框底部按钮事件和修改样式可能遇到问题
MSITC的博客
08-26 718
elementui的选择器select的下拉内容底部固定按钮
css将按钮固定在底部样式
魔仙佩奇
05-01 1705
<style> .r{position:fixed; bottom:0;} </style>
移动端中英文切换按钮样式_移动端底部 tab 切换组件的分析以及编写
weixin_36102010的博客
01-29 767
今天看了一下移动端的 tab 切换组件，虽然现在很多组件 ui 库，已经有成熟的这种 tab 切换组件，但是我们还是自己写了一个，接下来我们先来，设计图吧，这个组件不是我写的，感觉这样写有点不太妥当，也不知道后面会出现什么样的问题需要处理，等会看看我以前写的一个组件吧进入分析阶段有四个 tab，上面是图片下面对应这相应的文字，一看到这种情况，肯定是 flex 布局最合适了，上下布局，display...
修改腾讯IM咨询详情页面底部功能按钮样式
lgs7907
08-09 565
编者：李国帅 qq：9611153 微信lgs9611153 时间：2019/8/9 说明: 有时需要修改更多按钮弹出的操作栏，首先从聊天界面到底部更多按钮的调用顺序开始跟踪。 流程 Activity---ChatPanel---ChatBottomInputGroup---ChatActionsFragment---BottomBoxWave--ActionsPagerAdap...
uniapp css样式，两个按钮排列方式，左右排列，底部按钮排列方式
qq_37455326的博客
01-13 1678
【代码】uniapp css样式，两个按钮排列方式，左右排列，底部按钮排列方式。
AlertDialog的标题居中，底部按钮为三个时居中布局，更改按钮文字默认大写的设置
jiejingguo的博客
05-23 3667
标题居中、更改底部按钮默认大写的设置 <style name="CustomAlertDialog" parent="@style/Theme.AppCompat.Light.Dialog"> <item name="android:windowTitleStyle">@style/CustomAlertDialogTitle</item> ...
uniapp底部按钮在刘海屏展示不全问题
weixin_53474871的博客
12-29 684
html: <view class=“subBtn” :class=“subState?’’:‘disable’” @tap=“subFun”>提交 css: .subBtnBox{ width:750rpx; // height:164rpx; height: calc(164rpx + env(safe-area-inset-bottom)); position: fixed; left:0; bottom:0; .subBtn{ width: 710rpx; height:
css实现按钮固定在底部
热门推荐
OG
05-31 4万+
想要把按钮固定在底部，让浏览器滚动时也不受影响。其实代码很简单的啦！ css如下:<style> .r{position:fixed; bottom:0;} </style>html如下:<div> <div class="r"> <input type="submit" value="确认添加" class="btn btn-primary"/> </div>
微信小程序按钮悬浮固定在底部
qq_38822390的博客
01-29 2564
微信小程序按钮悬浮固定在底部   其实这是一个很简单的小程序的样式，也就随手记录下来了。 &lt;button class='Scancode' bindtap='getScancode'&gt;绑定车辆&lt;/button&gt; wxss: .Scancode { font-size: 39rpx; background: #fff; position...
mui底部不动的按钮
肖肖肖丽珠的博客
03-02 4338
立即报名         /*底部按钮*/          nav {         background: #fff     }          nav {         height: 50px;         top: inherit;         text-align: center     }          nav .m
el-autocomplete扩展使用-底部增加固定操作行
weixin_42190844的博客
04-15 3177
修改el-autocomplete下拉列表的样式 继上一篇文章，需求需要修改下拉列表的宽度后。 又来新活了，这次需要在下拉列表底部增加一个快捷新增按钮，如图所示。 看了一遍文档，el-autocomplete并没有提供这样的底部插槽。只有一个item的插槽，可以自定义模板。 但这只能控制每一项的内容，并不能在底部添加一个自定义内容，除非通过操作dom的方式去动态添加。 在准备放弃使用el-autocomplete,改用el-select来实现需求的时候。我在element-ui的官网发现了他的搜索框，使
GitHub 热榜项目：日榜（2026-08-18）
最新发布
u130130的博客
08-18 332
本期 GitHub 热榜聚焦 AI 工具链扩展：渗透测试、安全技能库和代理记忆项目持续升温，本地 LLM 推理工具则围绕硬件适配与 Apple Silicon 优化展开；短视频生成、量化交易、求职管理和自托管照片等应用也同步上榜。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值