根据小米官网风格帮 <div id="app" class="container"> <h1 class="text-center my-4">小米官网-关注列表</h1> <div class="row"> <div class="col-md-6 mx-auto"> <form class="form-inline mb-4"> <input type="text" class="form-control mr-sm-2" placeholder="请输入关注的内容" v-model="newItem"> <button class="btn btn-primary" type="button" v-on:click="addFollow">添加关注</button> </form> <ul class="list-group"> <li class="list-group-item" v-for="(item, index) in followList" :key="index"> {{ item }} <button class="btn btn-sm btn-danger float-right" v-on:click="removeFollow(index)">删除</button> </li> </ul> </div> </div> </div>写样式

以下是根据小米官网风格编写的样式代码：

/* 设置全局字体 */
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 设置容器样式 */
.container {
  max-width: 800px;
  margin: 0 auto;
}

/* 设置标题样式 */
h1 {
  font-size: 36px;
  font-weight: bold;
}

/* 设置表单样式 */
.form-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.form-control {
  width: 70%;
  margin-right: 10px;
}

.btn-primary {
  background-color: #FF6700;
  border-color: #FF6700;
}

.btn-primary:hover {
  background-color: #D45400;
  border-color: #D45400;
}

/* 设置列表样式 */
.list-group {
  margin-top: 20px;
}

.list-group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
}

.btn-danger {
  background-color: #FF4C4C;
  border-color: #FF4C4C;
}

.btn-danger:hover {
  background-color: #D52A2A;
  border-color: #D52A2A;
}