vue3 选中对话框时对话框右侧出一个箭头效果

<template>
 <ul class="list">
          <li  style="height: 180px;width: 95%"
            :key="index"
            v-for="(item, index) in listPlan.records"
            :style="liStyle(index)"
            @click="selectItem(index,item.id)" >
            <span v-if="selectedIndex === index" class="shixin"></span>
            <span v-if="selectedIndex === index" class="kongxin"></span>
            <div   class="notice">
              <div class="fsPnameDiv">
                <div  class="fsPname" >
                    {{ item.fsPname }}
                </div>
                <div v-if="item.fsStatus=='00'" style="color: #0a8fe9">
                  <span class="ant-badge-status-dot" style="background: rgb(68, 160, 239);"></span>
                  激活
                </div>
                <div v-if="item.fsStatus!='00'" style="color: rgb(208 213 217)">
                  <span class="ant-badge-status-dot" style="background: rgb(208 213 217);"></span>
                   禁用
                </div>
              </div>
              <div style="margin-top: 5px">
                每隔{{ item.fsExecinterval }}  {{ item.fsExecintervaltype  }} 执行一次
              </div>
              <div style="margin-top: 5px">
                创建时间:{{ item.createTime }}
              </div>
            </div>
          </li>
        </ul>
</template>

let planId=null;
// 当前选中的索引
const selectedIndex = ref(-1);
// 动态生成 li 的样式
const liStyle = (index: number) => {
  return {
    border: '1px solid #ccc', // 添加边框
    borderRadius: '5px',
    padding: '10px', // 内边距
    margin: '5px 0', // 外边距
    cursor: 'pointer', // 鼠标指针样式
    position: 'relative', // 相对定位，用于放置箭头
    borderLeft: selectedIndex.value === index ? '2px solid rgb(9 95 240)' : '1px solid #ccc', // 选中时的框样式
    borderBottom: selectedIndex.value === index ? '2px solid rgb(9 95 240)' : '1px solid #ccc',
    borderTop: selectedIndex.value === index ? '2px solid rgb(9 95 240)' : '1px solid #ccc',
    borderRight: selectedIndex.value === index ? '2px solid rgb(9 95 240)' : '1px solid #ccc',
  };
};

<style lang="less" scoped>
.notice{
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  padding: 8px 8px 12px;
}
.shixin {
  border: 10px solid transparent;
  border-left-color: #095ff0;
  position: absolute;
  top: 45%;
  right: -20px;
}
.kongxin {
  border: 10px solid transparent;
  border-left-color: #fff;
  position: absolute;
  top: 45%;
  right: -18px;
}
</style>

<div id="notice">
</div>
#notice {
            width: 150px;
            height: 175px;
            border: 1px solid #9D9D9D;
            /* 移动到屏幕中间 方便查看*/
            position: relative;
            left: 50%;
            right: 50%;
        }

<div id="notice">
  <div id="shixin"></div>
</div>
#shixin {
            border: 30px solid transparent;
            border-right-color: #9D9D9D; /*颜色和#notice框一致*/
            position: absolute;
            top: 10px;
            left: -60px;
        }

<div id="notice">
        <div id="shixin"></div>
        <div id="kongxin"></div>
  </div>
#kongxin {
            border: 30px solid transparent;
            border-right-color: #fff;
            position: absolute;
            top: 10px;
            left: -59px; /**/
        }

<style>
        #notice {
            width: 150px;
            height: 175px;
            border: 1px solid #9D9D9D;
            /* 移动到屏幕中间 方便查看*/
            position: relative;
            left: 50%;
            right: 50%;
        }
        #shixin {
            border: 30px solid transparent;
            border-right-color: #9D9D9D; /*和#notice框一致*/
            position: absolute;
            top: 10px;
            left: -60px;
        }
        #kongxin {
            border: 30px solid transparent;
            border-right-color: #fff; /*空心，和背景色一致*/
            position: absolute;
            top: 10px;
            left: -59px; /*和实心框错开1px 漏出箭头左边两边*/
        }
    </style>
 <div id="notice">
        <div id="shixin"></div>
        <div id="kongxin"></div>
  </div>