点击选中div 右下角显示对号

最新推荐文章于 2023-10-11 15:59:29 发布

奈何桥上哈啤酒

最新推荐文章于 2023-10-11 15:59:29 发布

阅读量440

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/yangpengxunb/article/details/130800295

版权

该代码段展示了一个用于显示和管理收货地址的前端组件。使用HTML和CSS创建了一个可选地址列表，其中包括默认地址标识和新增地址功能。当用户点击更多地址时，会显示或隐藏详细地址列表。组件还包括样式定义，如不同选中状态的样式设计。

摘要由CSDN通过智能技术生成

需求：

代码：

html：

<el-form-item label="收货地址：">
          <div>
            <div style="display:flex;">
              <div class="select" v-if="form.receiveName">{{ form.memo }}</div>
              <div style="margin-left:30px;">{{form.receiveName}} {{form.receivePhone}}</div>
              <div style="margin-left:30px;">
                {{form.receiveProvince}}{{form.receiveCity}}{{form.receiveArea}}{{form.receiveAddress}}
              </div>
            </div>
            <div v-if="moreSite">
              <div style="font-weight:600;font-size:15px">收货人信息</div>
              <div class="ShipAddressListBox">
                <div style="display:flex;align-items: center;cursor: pointer;margin-bottom: 10px;"
                 @click="address_callback(item),moreSite=!moreSite"
                v-for="(item,index) in ShipAddressList" :key="index">
                  <div :class="form.receiveName
                  ?form.receiveName==item.contacts?'select':'select1'
                  :item.defaultType=='1'?'select':'select1'">{{ item.memo }}</div>
                  <div style="margin-left:30px;">{{item.contacts}} {{item.phone}}</div>
                  <div style="margin-left:30px;">
                    {{item.province}}{{item.city}}{{item.area}}{{item.addressDetail}}
                  </div>
                  <div v-if="item.defaultType=='1'" class="moren">
                    默认地址
                  </div>
                </div>
              </div>
            </div>
            <div class="getSite">
              <div class="moreSite" @click="getShipAddressList" style="cursor: pointer;">
              <span>{{ moreSite?'收起地址':'更多地址'}}</span> 
              <img style="margin-left:5px;" :src="moreSite?require('../../assets/images/shouqi.png'):require('../../assets/images/zhankai.png')">
              </div>
              <div class="addSite" @click="address_callback(false)">+ 新增收货地址</div>
            </div>
          </div>
        </el-form-item>

css:

  .select {
position: relative;
width:150px;
height:30px;
text-align: center;
line-height: 30px;
color: #666666;
background-color: #fff;
border:2px solid #0793E7;
}
.select1 {
position: relative;
width:150px;
height:30px;
text-align: center;
line-height: 30px;
color: #666666;
background-color: #fff;
border:2px solid #DDDDDD;
}

.select:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
border: 8px solid #0793E7;
border-top-color: transparent;
border-left-color: transparent;
}

.select:after {
content: '';
width: 5px;
height: 10px;
position: absolute;
right: 3px;
bottom: 1px;
border: 1px solid #fff;
border-top-color: transparent;
border-left-color: transparent;
transform: rotate(35deg);

}