<template>
  <view class="common-details-container">
    <view class="common-header-wrapper">
      <image :src="minioUrl + '/img_jiayou_bg.png'" mode="scaleToFill" />
    </view>
    <view class="common-content-wrapper">
      <view class="common-card">
        <!-- common title -->
        <view class="common-card-title">中石化海清高速服务区加油站</view>
        <!-- sub title -->
        <view class="common-sub-title">营业时间:24小时</view>
        <view class="common-sub-title">客服电话:0532-8886666</view>
      </view>
      <view class="common-card">
        <view class="common-card-title u-margin-bottom-20">当前油价</view>
        <HyStation type="2" v-for="index in 4" :key="index"></HyStation>
        <view class="common-card-title u-margin-top-45">温馨提示</view>
        <view class="common-card-content">
          <text>1、进出加油站时，请严格遵守交通规则和指示标识，注意观察礼让其他车辆。</text>
          <text>2、加油前请熄火，不要拨打电话。</text>
          <text>3、加油站区域内请勿吸烟、使用明火（如打火机）。</text>
          <text>4、如需开具发票，请联系站内工作人员。</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useGlobal } from '../../composables/index'
const { minioUrl } = useGlobal()
</script>

<style lang="scss" scoepd>
@import '../base.scss';
</style>
