创建数独小游戏uniapp/vue

数独是一种逻辑解谜游戏，它规则稍复杂，解题过程富有挑战性。

游戏规则：很简单。 游戏棋盘是一个9x9的格网，被划分成3x3个区域，每个区域是一块九宫格。玩家需要在格内填入1到9的数字，其中一些数字在游戏开始时已经给出。 每一行，每一列，以及每一块九宫格区域内的数字必须是唯一的，不允许出现重复。简单的还需要又2*2以满足初级玩家游玩。

---

首先需要做出棋盘，数据模式来源于接口返回值，大多为字符串格式，我们首先要把他转换为多维数组。

let gameOriginData=1.2.23.4.231.142

for (let i = 0; i < gameOriginData.length; i += 4) {
          this.gameData.push([...gameOriginData.slice(i, i + 4)])
}
//输出数据是
//gameData=>
[
    ['1','.','2','.'],
    ['2','3','.','4'],
    ['.','2','3','1'],
    ['.','1','4','2'],
]

此时的数据就如同初级的4*4宫格数独了，但是我们还需要区分常量和变量，点的是可以切换数据的，带数字的则是引导常量。其次，还需要有标记功能在单个宫格内。

const kk = []
      for (let i = 0; i < this.gameData.length; i++) {
        kk[i] = []
        for (let j = 0; j < this.gameData[i].length; j++) {
          kk[i].push({
            id: this.gameData[i][j] == '.' ? '.' : parseInt(this.gameData[i][j]),
            marked: [],
            key: this.gameData[i][j] == '.' ? 0 : -1,//0则代表可以更改的值，-1代表定值不能改变
          })
        }
      }
      this.userMap = kk
//输出的数据结构是
//userMap =>
[
    [
        {id:1,key:-1,marked:[]},
        {id:'.',key:0,marked:[]},
        {id:2,key:-1,marked:[]},
        {id:'.',key:0,marked:[]},
    ],
    [
        {id:2,key:-1,marked:[]},
        {id:3,key:-1,marked:[]},
        {id:'.',key:0,marked:[]},
        {id:4,key:-1,marked:[]},
    ],
    [
        {id:'.',key:0,marked:[]},
        {id:2,key:-1,marked:[]},
        {id:3,key:-1,marked:[]},
        {id:1,key:-1,marked:[]},
    ],
    [
        {id:'.',key:0,marked:[]},
        {id:1,key:-1,marked:[]},
        {id:4,key:-1,marked:[]},
        {id:2,key:0,marked:[]},
    ]
]

此时则可以渲染棋盘了

html部分

<view class="qiPan">
        <view class="noticeView">
          <view v-for="(line, i) in userMap" :key="i" class="line">
            <view
              v-for="(block, j) in line"
              :key="j"
              :class="{
                borderGreen: checkCurrent(i, j),
                block9: mapSku > 2,
                block4: mapSku == 2,
              }"
              :style="[getBlockStyle(j, i)]"
            >
              <view
                v-if="block.key == -1"
                :style="[getBlockStyleNpc(j, i)]"
                :class="{
                  textWrong: hitSame(i, j),
                  textGrey: !hitSame(i, j),
                }"
              >
                {{ block.id }}</view
              >
              <view
                v-else-if="block.key > 0"
                class="handleAction"
                :class="{
                  textWrong: hitSame(i, j),
                  textGreen: !hitSame(i, j),
                  rockStart: hitSame(i, j),
                }"
                @tap="blockClick(i, j)"
                >{{ block.key }}
              </view>
              <!-- 此处为空白宫格，可以点击 -->
              <view v-else class="handleAction" @tap="blockClick(i, j)">
              </view>
            </view>
          </view>
</view>

js部分

//this.mapSku为2 则是2*2宫格 3则是3*3宫格
// 点击得当前宫格
    checkCurrent(i, j) {
      const result = this.touchCurrent[0] == i && this.touchCurrent[1] == j
      return result
    },
//当前定值的宫格css
    getBlockStyleNpc(i, j) {
      return {
        background: '#fffae1',
        width: '100%',
        height: '100%',
        'border-top-left-radius': i == 0 && j == 0 ? '10rpx' : '0rpx',
        'border-top-right-radius': j == 0 && i == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx',
        'border-bottom-left-radius':
          i == 0 && j == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx',
        'border-bottom-right-radius':
          i == this.mapSku * this.mapSku - 1 && j == this.mapSku * this.mapSku - 1
            ? '10rpx'
            : '0rpx',
      }
    },
//核心算法：判断是否存在同行同列或同单元格一致的用户填入数据
    hitSame(i, j) {
      const needNum = this.userMap[i][j].key >= 0 ? this.userMap[i][j].key : this.userMap[i][j].id
      // //求左上角的点
      const block_x = parseInt(i / this.mapSku) * this.mapSku
      const block_y = parseInt(j / this.mapSku) * this.mapSku
      if (needNum == 0) return false
      for (let k = 0; k < this.mapSku * this.mapSku; k++) {
        //行
        let theNum = this.userMap[i][k].key >= 0 ? this.userMap[i][k].key : this.userMap[i][k].id
        if (theNum == needNum && theNum > 0 && j != k) return true
        //列
        theNum = this.userMap[k][j].key >= 0 ? this.userMap[k][j].key : this.userMap[k][j].id
        if (theNum == needNum && theNum > 0 && i != k) return true
        //单元格内
        const thex = block_x + parseInt(k % this.mapSku)
        const they = block_y + parseInt(k / this.mapSku)
        theNum =
          this.userMap[thex][they].key >= 0
            ? this.userMap[thex][they].key
            : this.userMap[thex][they].id
        if (theNum == needNum && theNum > 0 && !(i == thex && j == they)) {
          return true
        }
      }
      return false
    },
    // 所有宫格宽高
    getBlockSize(val) {
      let result = 0
      if (val) {
        result = parseInt((680 + 4) / (this.mapSku * this.mapSku)) - 8
      } else {
        result = parseInt((680 + 4) / (this.mapSku * this.mapSku))
      }
      return result
    },
    // 设置棋盘宫内div的边框
    getBlockStyle(i, j) {
      return {
        width: this.getBlockSize() + 'rpx',
        height: this.getBlockSize() + 'rpx',
        'over-flow': 'hidden',
        'line-height': this.getBlockSize('lh') + 'rpx',
        // background: '#f8e7a4',
        'border-top-left-radius': i == 0 && j == 0 ? '10rpx' : '0rpx',
        'border-top-right-radius': j == 0 && i == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx',
        'border-bottom-left-radius':
          i == 0 && j == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx',
        'border-bottom-right-radius':
          i == this.mapSku * this.mapSku - 1 && j == this.mapSku * this.mapSku - 1
            ? '10rpx'
            : '0rpx',
        borderLeft:
          i == 0
            ? '#ae7a36 4rpx solid'
            : i % this.mapSku == 0
            ? '#ae7a36 2rpx solid'
            : '#dab88a 1rpx solid',
        borderRight:
          i == this.mapSku * this.mapSku - 1
            ? '#ae7a36 4rpx solid'
            : i % this.mapSku == this.mapSku - 1
            ? '#ae7a36 2rpx solid'
            : '#dab88a 1rpx solid',
        borderTop:
          j == 0
            ? '#ae7a36 4rpx solid'
            : j % this.mapSku == 0
            ? '#ae7a36 2rpx solid'
            : '#dab88a 1rpx solid',
        borderBottom:
          j == this.mapSku * this.mapSku - 1
            ? '#ae7a36 4rpx solid'
            : j % this.mapSku == this.mapSku - 1
            ? '#ae7a36 2rpx solid'
            : '#dab88a 1rpx solid',
      }
    },

css部分

.qiPan {
      padding-top: 20rpx;
      .noticeView {
        margin: 0 auto;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .line {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          .handleAction {
            width: 100%;
            height: 100%;
            position: relative;
          }
          .block4 {
            font-size: 68rpx;
            text-align: center;
          }
          .block9 {
            font-size: 50rpx;
            text-align: center;
          }
        }
        .textWrong {
          background-color: #f14e28 !important;
          color: #6c4e27 !important;
        }
        .textGreen {
          color: #519d07;
        }
        .textGrey {
          color: #6c4e27;
        }
        .borderGreen {
          border: 4rpx solid #73d217 !important;
        }
        .rockStart {
          animation: chanDong 1s linear;
        }
        @keyframes chanDong {
          5% {
            -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
            transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
          }
          6%,
          8%,
          10%,
          12% {
            -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 10deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 10deg);
          }

          7%,
          9%,
          11% {
            -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);
          }

          13% {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
          }
        }
      }
    }

此时我们就完成了棋盘的开发。接下来需要底部的数字按钮和操作按钮

<view
        class="actionUl"
        :style="{ 'justify-content': mapSku * mapSku <= 4 ? 'space-around' : 'start' }"
      >
        <view
          v-for="(item, index) in mapSku * mapSku"
          :key="index"
          :class="{
            actionLi4: mapSku * mapSku <= 4,
            actionLi9: mapSku * mapSku > 4,
          }"
          @click="actionChange(item + 1)"
        >
          {{ item + 1 }}
        </view>
        <view
          class="bt"
          :style="{ 'margin-left': mapSku * mapSku <= 4 ? '' : '36rpx' }"
          @click="marked = !marked"
        >
//marked为真则是标记模式
          <view class="word">{{ marked ? '填字' : '标记' }}</view>
        </view>
        <view
          class="bt"
          :style="{ 'margin-left': mapSku * mapSku <= 4 ? '' : '36rpx' }"
          @click="deleteSudo()"
        >
          <view class="word">删除</view>
        </view>
      </view>

.actionUl {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 680rpx;
      margin: 0 auto;
      padding-top: 50rpx;
      position: relative;
      z-index: 10;
      .actionLi4 {
        width: 126rpx;
        height: 126rpx;
        border-radius: 40rpx;
        border: solid 5rpx #fd6f10;
        font-size: 61rpx;
        text-align: center;
        line-height: 126rpx;
        font-weight: bold;
        cursor: pointer;
        margin-bottom: 20rpx;
      }
      .actionLi9:nth-child(7) {
        margin-right: 0;
      }
      .actionLi9 {
        width: 86rpx;
        margin-right: (78/6) + rpx;
        height: 86rpx;
        background-color: #ffab51;
        border-radius: 30rpx;
        border: solid 4rpx #fd6f10;
        font-size: 46rpx;
        text-align: center;
        line-height: 79rpx;
        font-weight: bold;
        cursor: pointer;
        margin-bottom: 20rpx;
      }
      .bt {
        width: 206rpx;
        height: 90rpx;
        border-radius: 24rpx;
        font-size: 34rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border: solid 5rpx #000000;
        text-align: center;
        line-height: 56rpx;
        cursor: pointer;
        position: relative;
        .icon {
          width: 34rpx;
          height: 34rpx;
          margin-right: 10rpx;
        }
        .word {
          padding-left: 10rpx;
          font-size: 34rpx;
          font-weight: bold;
        }
      }
    }

首先点击数字按钮，将数字action存储到data中，再宫格，获取[i,j]也就是坐标。再对数值的正确度进行判断。

// 方块点击事件
blockClick(i, j) {
    this.touchCurrent = [i, j]
},

// 点击下方数字按钮
    async actionChange(val) {
      const that = this
      if (this.touchCurrent.length == 0) {
        this.$tips.toast('请先选择方格')
        return false
      }
      const i = this.touchCurrent[0]
      const j = this.touchCurrent[1]
      this.action = val
      if (this.marked) {
        //此时为标记模式
        const io = this.userMap[i][j].marked.findIndex((value, index, arr) => {
          return value == val
        })
        if (io < 0) {
          this.userMap[i][j].marked.push(val)
        } else {
          this.userMap[i][j].marked.splice(io, 1)
        }
        this.$forceUpdate()
        return false
      }
      if (this.userMap[i][j].key != -1) {
        if (this.userMap[i][j].id != this.action) {
          this.userMap[i][j].key = parseInt(this.action)
        }
        this.$forceUpdate()
      }

      setTimeout(function () {
        if (that.hitSame(i, j)) {
          that.userMap[i][j].key = 0
        }
      }, 3000)

      //结果判断
      let canPass = true
      for (let m = 0; m < this.mapSku * this.mapSku; m++) {
        for (let n = 0; n < this.mapSku * this.mapSku; n++) {
          if (this.hitSame(m, n) || this.userMap[m][n].key == 0) {
            canPass = false
            break
          }
        }
      }
      if (canPass) {
        //游戏闯关成功，调用提交接口
        uni.showModal({
          content: '成功',
          showCancel: false,
        })
        // 弹窗提示
      }
    },

点击底部的数字，会首先判断是否标记模式，标记模式则会将数字push到该宫格内的marked中。否则则会判断userMap[i][j].key是否不为-1(非定值)，然后再将action赋值给userMap[i][j].key。顶部的textWrong则会判断是否正确，错误则标红并伴有回弹动画。之后actionChange中会重置userMap[i][j].key为0；

下面贴出完整代码

<template>
  <view class="allPage">
    <view class="page">
      <view class="qiPan">
        <view class="noticeView">
          <view v-for="(line, i) in userMap" :key="i" class="line">
            <view
              v-for="(block, j) in line"
              :key="j"
              :class="{
                borderGreen: checkCurrent(i, j),
                block9: mapSku > 2,
                block4: mapSku == 2,
              }"
              :style="[getBlockStyle(j, i)]"
            >
              <view
                v-if="block.key == -1"
                :style="[getBlockStyleNpc(j, i)]"
                :class="{
                  textWrong: hitSame(i, j),
                  textGrey: !hitSame(i, j),
                }"
              >
                {{ block.id }}</view
              >
              <view
                v-else-if="block.key > 0"
                class="handleAction"
                :class="{
                  textWrong: hitSame(i, j),
                  textGreen: !hitSame(i, j),
                  rockStart: hitSame(i, j),
                }"
                @tap="blockClick(i, j)"
                >{{ block.key }}
              </view>
              <!-- 此处为空白宫格，可以点击 -->
              <view v-else class="handleAction" @tap="blockClick(i, j)">
                <marked
                  :width="getBlockSize()"
                  :list="block.marked"
                  :marked="marked"
                  :action="action"
                  :map-sku="mapSku"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
      <view
        class="actionUl"
        :style="{ 'justify-content': mapSku * mapSku <= 4 ? 'space-around' : 'start' }"
      >
        <view
          v-for="(item, index) in mapSku * mapSku"
          :key="index"
          :class="{
            actionLi4: mapSku * mapSku <= 4,
            actionLi9: mapSku * mapSku > 4,
          }"
          @click="actionChange(item + 1)"
        >
          {{ item + 1 }}
        </view>
        <view
          class="bt"
          :style="{ 'margin-left': mapSku * mapSku <= 4 ? '' : '36rpx' }"
          @click="marked = !marked"
        >
          <view class="word">{{ marked ? '填字' : '标记' }}</view>
        </view>
        <view
          class="bt"
          :style="{ 'margin-left': mapSku * mapSku <= 4 ? '' : '36rpx' }"
          @click="deleteSudo()"
        >
          <view class="word">删除</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import marked from './components/marked.vue' //标记
export default {
  name: '',
  components: {
    marked,
  },
  data() {
    return {
      list: '',
      gameData: [],
      userMap: [],
      mapSku: 2,
      touchCurrent: [],
      action: '',
      marked: false,
    }
  },
  onLoad() {
    this.initData()
  },
  methods: {
    // 方块点击事件
    blockClick(i, j) {
      this.touchCurrent = [i, j]
    },
    // 点击底部删除按钮
    deleteSudo() {
      const that = this
      if (this.touchCurrent.length == 0) {
        this.$tips.toast('请先选择方格')
        return false
      }
      const i = this.touchCurrent[0]
      const j = this.touchCurrent[1]
      if (this.marked) {
        //当前标记方格清空
        this.userMap[i][j].marked = []
        return false
      }
      // 非标记模式 将当前宫格内的数值置空
      this.userMap[i][j].key = 0
      this.action = 0
    },
    // 点击下方数字按钮
    async actionChange(val) {
      const that = this
      if (this.touchCurrent.length == 0) {
        this.$tips.toast('请先选择方格')
        return false
      }
      const i = this.touchCurrent[0]
      const j = this.touchCurrent[1]
      this.action = val
      if (this.marked) {
        //此时为标记模式
        const io = this.userMap[i][j].marked.findIndex((value, index, arr) => {
          return value == val
        })
        if (io < 0) {
          this.userMap[i][j].marked.push(val)
        } else {
          this.userMap[i][j].marked.splice(io, 1)
        }
        this.$forceUpdate()
        return false
      }
      if (this.userMap[i][j].key != -1) {
        if (this.userMap[i][j].id != this.action) {
          this.userMap[i][j].key = parseInt(this.action)
        }
        this.$forceUpdate()
      }

      setTimeout(function () {
        if (that.hitSame(i, j)) {
          that.userMap[i][j].key = 0
        }
      }, 3000)

      //结果判断
      let canPass = true
      for (let m = 0; m < this.mapSku * this.mapSku; m++) {
        for (let n = 0; n < this.mapSku * this.mapSku; n++) {
          if (this.hitSame(m, n) || this.userMap[m][n].key == 0) {
            canPass = false
            break
          }
        }
      }
      if (canPass) {
        //游戏闯关成功，调用提交接口
        uni.showModal({
          content: '成功',
          showCancel: false,
        })
        // 弹窗提示
      }
    },
    // 初始化游戏
    async initData() {
      await this.loadData()
    },
    async loadData() {
      const gameOriginData = '1.2.23.4.231.142'
      for (let i = 0; i < gameOriginData.length; i += 4) {
        this.gameData.push([...gameOriginData.slice(i, i + 4)])
      }
      const kk = []
      for (let i = 0; i < this.gameData.length; i++) {
        kk[i] = []
        for (let j = 0; j < this.gameData[i].length; j++) {
          kk[i].push({
            id: this.gameData[i][j] == '.' ? '.' : parseInt(this.gameData[i][j]),
            marked: [],
            key: this.gameData[i][j] == '.' ? 0 : -1,
          })
        }
      }
      this.userMap = kk
    },
    // 点击得当前宫格
    checkCurrent(i, j) {
      const result = this.touchCurrent[0] == i && this.touchCurrent[1] == j
      return result
    },
    getBlockStyleNpc(i, j) {
      return {
        background: '#fffae1',
        width: '100%',
        height: '100%',
        'border-top-left-radius': i == 0 && j == 0 ? '10rpx' : '0rpx',
        'border-top-right-radius': j == 0 && i == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx',
        'border-bottom-left-radius':
          i == 0 && j == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx',
        'border-bottom-right-radius':
          i == this.mapSku * this.mapSku - 1 && j == this.mapSku * this.mapSku - 1
            ? '10rpx'
            : '0rpx',
      }
    },
    hitSame(i, j) {
      // // 判断是否存在同行同列或同单元格一致的用户填入数据
      const needNum = this.userMap[i][j].key >= 0 ? this.userMap[i][j].key : this.userMap[i][j].id
      // //求左上角的点
      const block_x = parseInt(i / this.mapSku) * this.mapSku
      const block_y = parseInt(j / this.mapSku) * this.mapSku
      if (needNum == 0) return false
      for (let k = 0; k < this.mapSku * this.mapSku; k++) {
        //行
        let theNum = this.userMap[i][k].key >= 0 ? this.userMap[i][k].key : this.userMap[i][k].id
        if (theNum == needNum && theNum > 0 && j != k) return true
        //列
        theNum = this.userMap[k][j].key >= 0 ? this.userMap[k][j].key : this.userMap[k][j].id
        if (theNum == needNum && theNum > 0 && i != k) return true
        //单元格内
        const thex = block_x + parseInt(k % this.mapSku)
        const they = block_y + parseInt(k / this.mapSku)
        theNum =
          this.userMap[thex][they].key >= 0
            ? this.userMap[thex][they].key
            : this.userMap[thex][they].id
        if (theNum == needNum && theNum > 0 && !(i == thex && j == they)) {
          return true
        }
      }
      return false
    },
    // 宫格宽高
    getBlockSize(val) {
      let result = 0
      if (val) {
        result = parseInt((680 + 4) / (this.mapSku * this.mapSku)) - 8
      } else {
        result = parseInt((680 + 4) / (this.mapSku * this.mapSku))
      }
      return result
    },
    // 设置棋盘宫内div的边框
    getBlockStyle(i, j) {
      return {
        width: this.getBlockSize() + 'rpx',
        height: this.getBlockSize() + 'rpx',
        'over-flow': 'hidden',
        'line-height': this.getBlockSize('lh') + 'rpx',
        // background: '#f8e7a4',
        'border-top-left-radius': i == 0 && j == 0 ? '10rpx' : '0rpx',
        'border-top-right-radius': j == 0 && i == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx',
        'border-bottom-left-radius':
          i == 0 && j == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx',
        'border-bottom-right-radius':
          i == this.mapSku * this.mapSku - 1 && j == this.mapSku * this.mapSku - 1
            ? '10rpx'
            : '0rpx',
        borderLeft:
          i == 0
            ? '#ae7a36 4rpx solid'
            : i % this.mapSku == 0
            ? '#ae7a36 2rpx solid'
            : '#dab88a 1rpx solid',
        borderRight:
          i == this.mapSku * this.mapSku - 1
            ? '#ae7a36 4rpx solid'
            : i % this.mapSku == this.mapSku - 1
            ? '#ae7a36 2rpx solid'
            : '#dab88a 1rpx solid',
        borderTop:
          j == 0
            ? '#ae7a36 4rpx solid'
            : j % this.mapSku == 0
            ? '#ae7a36 2rpx solid'
            : '#dab88a 1rpx solid',
        borderBottom:
          j == this.mapSku * this.mapSku - 1
            ? '#ae7a36 4rpx solid'
            : j % this.mapSku == this.mapSku - 1
            ? '#ae7a36 2rpx solid'
            : '#dab88a 1rpx solid',
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.allPage {
  background: #ffe97e;
  min-height: 100vh;
  .page {
    position: relative;
    width: 100%;
    .qiPan {
      padding-top: 20rpx;
      .noticeView {
        margin: 0 auto;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .line {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          .handleAction {
            width: 100%;
            height: 100%;
            position: relative;
          }
          .block4 {
            font-size: 68rpx;
            text-align: center;
          }
          .block9 {
            font-size: 50rpx;
            text-align: center;
          }
        }
        .textWrong {
          background-color: #f14e28 !important;
          color: #6c4e27 !important;
        }
        .textGreen {
          color: #519d07;
        }
        .textGrey {
          color: #6c4e27;
        }
        .borderGreen {
          border: 4rpx solid #73d217 !important;
        }
        .rockStart {
          animation: chanDong 1s linear;
        }
        @keyframes chanDong {
          5% {
            -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
            transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
          }
          6%,
          8%,
          10%,
          12% {
            -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 10deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 10deg);
          }

          7%,
          9%,
          11% {
            -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);
          }

          13% {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
          }
        }
      }
    }
    .actionUl {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 680rpx;
      margin: 0 auto;
      padding-top: 50rpx;
      position: relative;
      z-index: 10;
      .actionLi4 {
        width: 126rpx;
        height: 126rpx;
        border-radius: 40rpx;
        border: solid 5rpx #fd6f10;
        font-size: 61rpx;
        text-align: center;
        line-height: 126rpx;
        font-weight: bold;
        cursor: pointer;
        margin-bottom: 20rpx;
      }
      .actionLi9:nth-child(7) {
        margin-right: 0;
      }
      .actionLi9 {
        width: 86rpx;
        margin-right: (78/6) + rpx;
        height: 86rpx;
        background-color: #ffab51;
        border-radius: 30rpx;
        border: solid 4rpx #fd6f10;
        font-size: 46rpx;
        text-align: center;
        line-height: 79rpx;
        font-weight: bold;
        cursor: pointer;
        margin-bottom: 20rpx;
      }
      .bt {
        width: 206rpx;
        height: 90rpx;
        border-radius: 24rpx;
        font-size: 34rpx;
        // color: #ffffff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border: solid 5rpx #000000;
        cursor: pointer;
        position: relative;
        .icon {
          width: 34rpx;
          height: 34rpx;
          margin-right: 10rpx;
        }
        .word {
          padding-left: 10rpx;
          font-size: 34rpx;
          font-weight: bold;
        }
      }
    }
  }
}
</style>

marked组件代码如下

<template>
  <view class="marked" :style="{ padding: mapSku > 2 ? '4rpx' : '0rpx' }">
    <view class="markedLi" :style="{ 'margin-left': mapSku > 2 ? '6rpx' : '0rpx' }">
      <view
        v-for="(item, index) in markedList"
        :key="index"
        class="markedItem"
        :style="[getBlockStyleMaked()]"
      >
        {{ item }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Marked',
  props: {
    mapSku: {
      type: Number,
      default: 2,
    },
    list: {
      type: Array,
      default: () => [],
    },
    action: {
      type: Number,
      default: 0,
    },
    marked: {
      type: Boolean,
      default: false,
    },
    width: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return {
      markedList: [],
    }
  },
  watch: {
    list: function (val) {
      this.markedList = val
    },
  },
  created() {
    console.log('width是', this.width)
    this.markedList = this.list
  },
  methods: {
    getBlockStyleMaked() {
      const number4 = parseInt((this.width - 20) / this.mapSku) + 'rpx'
      const number9 = parseInt((this.width - 36) / this.mapSku) + 'rpx'
      console.log('number4是', number4)
      return {
        'text-align': 'center',
        'font-size': (this.mapSku > 2 ? 20 : 30) + 'rpx',
        width: this.mapSku > 2 ? number9 : number4,
        height: this.mapSku > 2 ? number9 : number4,
        'line-height': this.mapSku > 2 ? number9 : number4,
      }
    },
  },
}
</script>

<style scoped lang="scss">
.marked {
  width: 100%;
  height: 100%;
  display: flex;
  background: #f8e7a4;
  flex-direction: row;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  .markedLi {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
    margin: 0 auto;
  }
}
</style>