<!-- eslint-disable vue/multi-word-component-names -->
<script setup lang="ts">

</script>

<template>
  <div class="TheWelcome">
    <h2>当前求和为: {{ sum }}</h2>
    <button @click="add">点击加一</button>

    <hr>

    <!-- 显示狗图片 -->
    <div>
      <button @click="loadRandomDog">加载随机狗图片</button>
      <img v-for="(dog, index) in dogList" :src="dog" :key="index" alt="狗图片" style="width: 150px; height: auto; margin: 10px;">
    </div>
  </div>
</template>

<style scoped>
.TheWelcome {
  background-color: skyblue; /* 设置背景颜色 */
  box-shadow: 0 0 10px; /* 添加阴影效果 */
  border-radius: 10px; /* 设置圆角半径 */
  padding: 20px; /* 设置内边距 */
}

/* 设置按钮之间的间距 */
button {
  margin: 0 5px;
}

/* 这个样式规则似乎没有用到，可以考虑移除或注释掉 */
/* li {
  font-size: 20px;
} */
</style>
