.list_phone{ width:100%; height: 50px; display: flex; align-items: center; color:#333333; border-bottom: 1px solid #dcdee0; overflow: hidden; } .list_phone:focus{ border-bottom: 1px solid #116cae; }

根据你提供的代码，你想要在.list_phone元素获得焦点时改变其底部边框颜色。但是，:focus伪类只能应用于可接收焦点的元素，如链接、表单元素等。因此，在.list_phone元素上应用:focus伪类是不可行的。

如果你想要实现这个效果，可以考虑使用JavaScript。具体地说，你可以为.list_phone元素添加一个事件监听器，当它被点击时改变其底部边框颜色。下面是一个简单的示例代码：

// 获取所有的.list_phone元素
var listPhones = document.querySelectorAll('.list_phone');

// 为每个.list_phone元素添加点击事件监听器
listPhones.forEach(function(listPhone) {
  listPhone.addEventListener('click', function() {
    listPhone.style.borderBottom = '1px solid #116cae';
  });
});

这段代码会获取页面上所有的.list_phone元素，并为它们添加一个点击事件监听器。当一个.list_phone元素被点击时，它的底部边框颜色就会改变成#116cae。

相关问题

<view class="user_info_wrap"> <view class="user_img_wrap" wx:if="{{userInfo.avatarUrl}}"> <image class="user_bg" src="{{userInfo.avatarUrl}}"></image> <view class="user_info"> <image class="user_icon" src="{{userInfo.avatarUrl}}"></image> <view class="user_name">{{userInfo.nickName}}</view> </view> </view> <view class="user_btn" wx:else> <navigator url="/pages/login/login">授权登录</navigator> </view> </view> <view class="user_content"> <view class="user_main"> <view class="recommend_wrap" bindtap="logOut" wx:if="{{userInfo.avatarUrl}}"> 退出登录 </view> </view> <view class="address-box"> <view class="address-manage"> <navigator url="/pages/address/address">地址管理</navigator> </view> <view wx:if="{{hasAddress}}" class="address-list"> <view>{{address.name}}</view> <view>{{address.phone}}</view> <view>{{address.detail}}</view> </view> </view> <view class="orders-box"> <navigator url="/pages/order/order" class="orders">我的订单</navigator> </view> </view>帮我写一个wxss美化这个界面

以下是一个简单的样式美化，你可以根据自己的需求进行调整：

.user_info_wrap {
background-color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
border-radius: 6px;
padding: 20rpx;
margin-bottom: 20rpx;
}

.user_img_wrap {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}

.user_bg {
width: 60rpx;
height: 60rpx;
margin-right: 20rpx;
border-radius: 50%;
background-color: #eee;
}

.user_info {
display: flex;
align-items: center;
}

.user_icon {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
margin-right: 10rpx;
}

.user_name {
font-size: 28rpx;
color: #333;
}

.user_btn {
display: flex;
align-items: center;
justify-content: center;
height: 60rpx;
border-radius: 6px;
background-color: #007aff;
color: #fff;
font-size: 28rpx;
}

.user_content {
background-color: #fff;
border-radius: 6px;
padding: 20rpx;
}

.recommend_wrap {
display: flex;
align-items: center;
justify-content: center;
height: 60rpx;
border-radius: 6px;
background-color: #007aff;
color: #fff;
font-size: 28rpx;
}

.address-box {
margin-top: 20rpx;
}

.address-manage {
display: flex;
align-items: center;
justify-content: center;
height: 60rpx;
border-radius: 6px;
background-color: #eee;
font-size: 28rpx;
}

.address-list {
margin-top: 20rpx;
padding: 20rpx;
background-color: #f5f5f5;
border-radius: 6px;
font-size: 28rpx;
}

.orders-box {
margin-top: 20rpx;
}

.orders {
display: flex;
align-items: center;
justify-content: center;
height: 60rpx;
border-radius: 6px;
background-color: #eee;
font-size: 28rpx;
}

帮我用vue 和css写一个类似微信通讯录的界面，把div 换成view

好的，我会帮你实现这个界面。首先，我们需要准备一些数据，比如联系人的信息。假设我们有以下数据：

[
  {
    "id": 1,
    "name": "张三",
    "avatar": "https://via.placeholder.com/50x50",
    "phone": "13333333333"
  },
  {
    "id": 2,
    "name": "李四",
    "avatar": "https://via.placeholder.com/50x50",
    "phone": "14444444444"
  },
  {
    "id": 3,
    "name": "王五",
    "avatar": "https://via.placeholder.com/50x50",
    "phone": "15555555555"
  }
]

接下来，我们可以使用 Vue 和 CSS 实现这个界面。首先，我们需要在 HTML 中定义一个包含联系人列表的容器：

<template>
  <div class="contact-list">
    <div class="contact-item" v-for="contact in contacts" :key="contact.id">
      <div class="avatar">
        <img :src="contact.avatar" alt="">
      </div>
      <div class="info">
        <div class="name">{{ contact.name }}</div>
        <div class="phone">{{ contact.phone }}</div>
      </div>
    </div>
  </div>
</template>

然后，我们可以在 CSS 中为这个容器和联系人列表的每个元素定义样式：

.contact-list {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.contact-item:hover {
  background-color: #f5f5f5;
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
}

.info {
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 16px;
  font-weight: bold;
}

.phone {
  font-size: 14px;
  color: #666;
}

最后，我们需要在 Vue 中引入数据，并将它们渲染到界面中：

<script>
export default {
  data() {
    return {
      contacts: [
        {
          id: 1,
          name: '张三',
          avatar: 'https://via.placeholder.com/50x50',
          phone: '13333333333'
        },
        {
          id: 2,
          name: '李四',
          avatar: 'https://via.placeholder.com/50x50',
          phone: '14444444444'
        },
        {
          id: 3,
          name: '王五',
          avatar: 'https://via.placeholder.com/50x50',
          phone: '15555555555'
        }
      ]
    }
  }
}
</script>

这样，一个类似微信通讯录的界面就完成了。