<template>
<div class="image-slider">
<div>
<img src="https://img.thehour.cn/2020/06/14/15920940945953601035590088545385.jpeg?w=720&h=480" />
</div>
<img src="https://tse1-mm.cn.bing.net/th/id/R-C.465d9c3d971512eb57e68d165b3aafc5?rik=UQSCnzYcpmlsFw&riu=http%3a%2f%2fimage.hnol.net%2fc%2f2021-05%2f27%2f22%2f20210527223130451-4609609.jpg&ehk=vRerayO7kZfqvvvnNDNZfF43WTyEicBAbAYEYzg9G0U%3d&risl=&pid=ImgRaw&r=0" />
</div>
</template>
<script>
export default {
mounted() {},
methods: {},
};
</script>
<style>
body {
background: none;
font: bold 100% Helvetica, sans-serif;
}
.image-slider {
position: relative;
display: inline-block;
width: 720px;
height: 480px;
padding: 0;
overflow: hidden;
}
.image-slider div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 50%;
max-width: 100%;
height: 100%;
overflow: hidden;
resize: horizontal;
}
.image-slider div::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 12px;
height: 12px;
padding: 2px;
background: linear-gradient(-45deg, black 0 50%, transparent 50% 100%);
cursor: ew-resize;
}
.image-slider img {
display: block;
user-select: none;
}
</style>
11-14
482
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)