| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 |
- <template>
- <view class="custom-toast" v-if="show">
- <view class="toast-icon">
- <uni-icons type="checkmarkempty" size="80" color="#FFF"></uni-icons>
- </view>
- <view class="toast-content">
- <text class="font34">{{ message }}</text>
- </view>
- </view>
- </template>
- <script>
- export default {
- name: 'custom-toast',
- data() {
- return {
- show: false,
- message: ''
- };
- },
- methods: {
- showToast(msg, duration = 2000) {
- this.message = msg;
- this.show = true;
- setTimeout(() => {
- this.show = false;
- }, duration);
- }
- }
- };
- </script>
- <style scoped>
- .custom-toast {
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background-color: #fff;
- padding: 60rpx;
- border-radius: 10px;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
- color: #333;
- z-index: 9999;
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- .toast-icon {
- width: 100px;
- height: 100px;
- background-color: #F2D0A2;
- border-radius: 50%;
- display: flex;
- justify-content: center;
- align-items: center;
- margin-bottom: 10px;
- }
- .toast-icon text {
- font-size: 40px;
- color: #fff;
- }
- .toast-content {
- text-align: center;
- font-size: 32rpx;
- }
- </style>
|