template div class=common-footer span class= completed index = progress - 1 v-for=tab index in tabs key=index ref=tabs span class=tab-text tab span span class=li

This template is a common footer component that displays a progress bar with tabs. It is designed to show the progress of a multi-step process, such as selecting a phone number, choosing a plan, verifying identity, confirming an order, and activating a SIM card.

The component takes a progress prop, which specifies the current progress of the process. The progress should be a number between 1 and the total number of steps. For example, if the current step is the second step, the progress would be 2.

The template uses Vue.js directives and event listeners to dynamically update the progress bar based on the progress prop. It uses CSS classes and styles to style the tabs, progress line, and check marks.

The tabs array defines the labels for each tab. You can modify this array to customize the labels to fit your specific use case.

The setLinePosition function is responsible for positioning the progress line and updating the styles of the tabs and check marks based on the current progress. It is called when the component is mounted and whenever the window is resized.

The component also includes some responsive styles to adjust the layout and positioning of the progress line on different screen sizes.

You can use this template as a starting point and customize the styles and functionality to fit your project requirements