DigitalScholl/Learun.Framework.Ultimate V7/Learun.Application.Web/Areas/LR_CodeDemo/Views/ImgShow/Demo3.cshtml

@{
    ViewBag.Title = "图片展示";
    Layout = "~/Views/Shared/_Index.cshtml";
}
<div style="position:relative;height:800px;width:1440px;border:1px solid #ccc;">
    <img src="~/Content/images/imgshow/流程_有车_显示屏.jpg" />

    <div class="node" style="top:40px;left:760px;transform: skewY(25deg);">冲压产线</div>
    <div id="line1-1" class="node" style="top:70px;left:760px;transform: skewY(25deg);">已完成:750</div>
    <div id="line1-2" class="node" style="top:110px;left:760px;transform: skewY(25deg);">未完成:300</div>
    <div class="node" style="top:570px;left:80px;transform: skewY(25deg);">涂装产线</div>
    <div id="line2-1" class="node" style="top:600px;left:80px;transform: skewY(25deg);">已完成:450</div>
    <div id="line2-2" class="node" style="top:630px;left:80px;transform: skewY(25deg);">未完成:550</div>
    <div class="node" style="top:300px;left:1220px;transform: skewY(-25deg);">焊接产线</div>
    <div id="line3-1" class="node" style="top:330px;left:1220px;transform: skewY(-25deg);">已完成:587</div>
    <div id="line3-2" class="node" style="top:360px;left:1220px;transform: skewY(-25deg);">未完成:582</div>
    <div class="node" style="top:475px;left:710px;transform: skewY(-25deg);">总装产线</div>
    <div id="line4-1" class="node" style="top:505px;left:710px;transform: skewY(-25deg);">已完成:150</div>
    <div id="line4-2" class="node" style="top:535px;left:710px;transform: skewY(-25deg);">未完成:910</div>

</div>
@Html.AppendJsFile("/Areas/LR_CodeDemo/Views/ImgShow/Demo3.js")
<style>
    body {
        padding: 5px;
        overflow: auto;
    }

    img {
        position: relative;
        height: 100%;
        width: 100%;
    }

    .node {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 20px;
        color: #00ff21;
    }
</style>