uniapp stepping pit project: uniapp modifies the style of pop-up window components

Create the zz-prompt folder in the components folder, and then create index.vue below

 <!--通知弹窗index.vue-->
<template>
  <view class="prompt-box" v-if="visible" @touchmove="true">
    <view class="prompt">
      <view class="prompt-top">
        <text class="prompt-title">{
   
   {title}}</text>
        <!-- <input v-if="!isMutipleLine" class="prompt-input" :style="inputStyle" type="text" :placeholder="placeholder" v-model="value">
        <textarea v-else class="prompt-input" :style="inputStyle" type="text" :placeholder="placeholder" v-model="value"></textarea> -->
        <!-- <view class="prompt-context">{
   
   {context}}</view> -->
      </view>
      <slot></slot>
      <view class="prompt-buttons">
        <!-- <button class="prompt-cancle" :style="'color:' + mainColor" @click="close">取消</button> -->
        <button class="prompt-confirm" :style="'background:' + mainColor" @click="confirm">关闭</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true,
    },
    title: {
      type: String,
      default: '提示',
    },
    // context: {
    //   type: String,
    //   default: '内容',
    // },
    placeholder: {
      type: String,
      default: '请输入内容',
    },
    mainColor: {
      type: String,
      default: '#e74a39',
    },
    defaultValue: {
      type: String,
      default: '',
    },
    inputStyle: {
      type: String,
      default: '',
    },
    // 是否多行输入的textarea
    isMutipleLine: {
      type: Boolean,
      default: false,
    }
  },
  data () {
    return {
      value: '',
    }
  },
  watch: {
    visible (val) {
      if (val) {
        this.value = this.defaultValue
      }
    }
  },
  mounted () {
    this.value = this.defaultValue === 'true' ? '' : this.defaultValue
  },
  methods: {
    close () {
      this.$emit('update:visible', false)
    },
    confirm () {
      this.$emit('confirm', this.value)
      this.value = ''
    },
  }
}
</script>

<style scoped>
view,
button,
input {
  box-sizing: border-box;
}

.prompt-box {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  transition: opacity 0.2s linear;
}

.prompt {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 600rpx;
  min-height: 300rpx;
  background: white;
  border-radius: 20rpx;
  overflow: hidden;
}

.prompt-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.prompt-title {
  margin: 20rpx 0;
  color: #333;
  font-weight: 900;
  font-size: 32rpx;
}
.prompt-context {
  margin: 30rpx;
  color: #333;
}
.prompt-input {
  width: 520rpx;
  min-height: 72rpx;
  padding: 8rpx 16rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
  text-align: left;
}

.prompt-buttons {
  display: flex;
  justify-content: center;
  width: 100%;
  box-shadow: 0 0 2rpx 2rpx #eee;
}

.prompt-buttons button:after {
  border-radius: 0;
}

button {
  width: 50%;
  background: white;
  border-radius: 0;
}

.prompt-cancle {
  background: white;
}

.prompt-confirm {
  width: 100%;
  color: white;
}
</style>

Introduce the notification pop-up window component in the single page home.vue

//html
<!-- 通知弹窗 -->
    <prompt :visible.sync="promptVisible" @confirm="clickPromptConfirm" title="通知标题" mainColor="#3490F9">
      <!-- 这里放入slot内容-->
      <view style=" margin:30rpx;">
        这里是内容
      </view>
    </prompt>
    
//data
import Prompt from '@/components/zz-prompt/index.vue' // 通知弹窗组件
export default {
    components: {
      Prompt
    },
    data() {
      return {
        ......
        // 控制弹框输入框显示
        promptVisible: false,
      };
    },
    
//js
onLoad: function () {
    let that = this
    that.promptVisible = true   // 通知弹窗打开
}

methods: {    
   /**
   * 关闭按钮
   */
    clickPromptConfirm () {
      this.promptVisible = false  // 通知弹窗关闭
    },
}

---

previous article,

git pull failed, no permission: Please make sure you have the correct access rights and the repository exist_git pull no permission_Yichu Blog-CSDN Blog git pull failed, no permission: Please make sure you have the correct access rights and The repository exists, the prompt error shows that there is no permission, mainly because the ssh public keys on different devices are different, which leads to problems with the git repository public key, which needs to be regenerated to solve the problem. _git pull has no permission https://blog.csdn.net/weixin_43928112/article/details/131196951