<template>
  <div class="100vw">
    <div class="relative w-full mt50">
      <span class="font24 font-bold lh40">指示标志</span>
      <div
        class="right30 w72 lh40 h40 absolute right0 top0 bg-primary-yellow flex items-center justify-center"
      >
        <img class="w18 h16" src="@/assets/img/markLine/back_icon.png" />
        <span class="ml4">返回</span>
      </div>
    </div>
    <div class="text-left font16">
      <div class="inline-block text-left ml20">
        <div
          class="w200 h184 justify-center text-center border-gray pt12 inline-block cursor-pointer"
        >
          <div class="w100 h100 margin-center">
            <preImage :src="forbiddenMark">
              <div class="font-bold font24">向左转弯</div>
              <div class="font24 w-full">5/29</div>
            </preImage>
          </div>

          <div class="mt21 font-bold">立交直行和左转弯行驶</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import preImage from "@/components/preImage/index.vue";
import forbiddenMark from "@/assets/img/home/forbidden_mark.png";
export default defineComponent({
  setup() {
    return {
      forbiddenMark: forbiddenMark,
    };
  },
  components: {
    preImage,
  },
});
</script>

<style scoped>
.border-gray {
  border: 1px solid #e8e8e8;
}
.bg-primary-yellow {
  background: #f9de5b;
}
.margin-center {
  margin: 0 auto;
}
</style>